Событие Click не работает после замены элементов

Question

Я получил этот код:

$(function () {
    $('#or').click(function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

Работает нормально, и он заменяет:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

на ввод текста, проблема возникает, когдаЯ нажимаю #or, щелкаю где-то еще (затем он заменяет исходное содержимое), и когда я добавляю исходное содержимое обратно, оно не работает.

Это код, который я использовал для замены text input заменено #m0 на оригинальное:

$(function () {
    $('.m').click(function () {
        $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>');
    });
});

Итак, чтобы убедиться, что вы меня поняли:

Исходное содержание:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

, затем я использую это, чтобы заменить вышеприведенное текстовым вводом:

$(function () {
    $('#or').click(function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

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

$(function () {
    $('.m').click(function () {
        $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>');
    });
});

И, наконец, когда:

<input type="text" class="highlight" name="test1"/>

заменяется на:

<label><input type="radio" id="or" name="type" value="1"/>Click me</label>

Событие щелчка больше не работает.

Answer 1

Используйте метод live, который связывает события даже после обновления DOM http://api.jquery.com/live/

$(function () {
    $('#or').live('click', function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

Answer 2

Обновление Этот ответ является устаревшим.Проверьте JQuery.on , который сочетает в себе лучшее из обоих миров.Он позволяет вам связать событие с элементом, а само событие предназначено для элементов внутри этого элемента.Это похоже на live, только вы можете выбрать определенный целевой элемент (например, элемент контейнера, в который добавляется / изменяется контент Ajaxed).on заменяет live, bind и delegate.

Исходный ответ (для JQuery до 1.7): метод live JQuery, как предлагается в ответах,легкий выход, но у него есть некоторые недостатки.Это медленнее, потому что каждая модификация DOM вызывает переоценку всех «живых» селекторов.

См. Также этот ответ для некоторых недостатков: Разница в производительности между .live ('click', fn) и .click (fn) jQuery

Поэтому я скорее используюbind или click для явного связывания события click с вновь созданными элементами.Это немного больше работы (хотя пренебрегают, если вы правильно структурируете свой код), и это дает вам лучшую производительность и больший контроль.

Answer 3

Вам нужно будет сделать обработчики событий live:

$('#or').live("click", function() {
    //Event hander code
});

Из документации jQuery для live:

Прикрепить обработчик к событию для всех элементов, которые соответствуют текущему селектор, сейчас и в будущем.

Проблема в том, что обработчик событий связан с элементом, который существует в DOM во время привязки. Когда этот элемент удаляется, обработчик события удаляется вместе с ним. Когда вы добавляете новый элемент (это новый элемент, даже если он выглядит так же, как и старый), к нему не привязывается обработчик событий. Вот где live пригодится. Он контролирует DOM для добавления элементов, соответствующих селектору, и применяет обработчик событий к любому, что делает.

Answer 4

Заменить .click(...) на .live("click", ...)