Что происходит со связанным событием, когда элемент DOM исчезает?

Question

Что происходит, когда я связываю обработчик события с элементом DOM, а затем уничтожаю элемент DOM? Нужно ли мне проходить процесс отмены привязки обработчиков событий?

<div id="el1">
    <span id="c">Click Me!</span>
</div>
<span id="note">Note...</span>
<script>
    var i=0;
    $("#c").click(function(){
        i++;
        $("#note").html("'Click Me!' was clicked.");
        $("#el1").html("<span id=\"c\">Click Me! ("+i+" time)</span>");
    });
</script>

В действии: http://jsfiddle.net/lordloh/FyLdM/

Очевидно, что четный обработчик не привязывается к новому объекту DOM с таким же идентификатором. Работа вокруг я использую это

<div id="el1">
   <span id="c">Click Me!</span>
</div>
<span id="note">Note...</span>
<script>
var i=0;
$("#c").click(clickHandler);

function clickHandler(){
    i++;
    $("#note").html("'Click Me!' was clicked.");
    $("#el1").html("<span id=\"c\">Click Me! ("+i+" time)</span>");
    $("#c").click(clickHandler);
}
</script>

В действии: http://jsfiddle.net/lordloh/FyLdM/1/

Меня беспокоит, является ли это плохой практикой или это приемлемо? Что произойдет, если эта последовательность повторяется миллионы раз? Может ли движок JavaScript подвергнуться риску нехватки памяти?

Answer 1

Вместо этого вам следует сосредоточиться на делегировании событий.

$('#someWrapper').on('click', '.someClass', function() {
   // do your stuff.
});

Затем вы можете добавить элементы в обертку, назначить их .someClass и событие сработает.

Answer 2

Вместо того, чтобы перепривязывать событие каждый раз при создании элемента, вы должны вместо этого использовать делегирование события, как предлагает AlienWebguy. Однако в этом случае ничто не указывает на объекты jQuery после их удаления из dom, поэтому сборка мусора должна позаботиться об очистке неиспользуемых переменных.