Событие щелчка jQuery после добавления содержимого

#jquery

Вопрос:

Хотите знать, почему приведенный ниже пример не работает?

 <a id="load_list" href="#">Load the list</a>

<ul></ul>

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>');
        return false;
    });
    $('ul li a').click(function() {
        alert('Thank you for clicking');
        return false;
    });
});
</script>

1. -1. Мой вопрос был неправильно отклонен, потому что часть предоставленной информации была неверной, как будто мой ответ был полностью неправильным.

2. Не нужно быть гением, чтобы понять, что я опубликовал только часть кода, которая не работала. Спасибо за ваш вклад, хотя.

Ответ №1:

Поскольку добавляемые элементы не существуют при определении click обработчика, они создаются динамически. Чтобы исправить это, вы можете использовать метод delegate() из jQuery.

 $('ul').delegate('a','click',function() {
    // your code here ...
});

Онлайн-пример: http://jsfiddle.net/J5QJ9 /

1. Как говорит Bless Yahu, лучше использовать делегирование, см. Объяснение nettuts по этому поводу: net.tutsplus.com/tutorials/javascript-ajax /…

2. Немного дополнительной информации (мои извинения за сомнительное форматирование): Старое: $("#Item1").click(function(e) { Новое: $(document).delegate("#Item1", "click", function(e) { Еще новее: $(document).on("click", "#Item", function(e) {

3. .live было удалено с версии jQuery 1.9, так что можно использовать .delegate или .on .

4. .on у меня не сработало, хотя у меня есть jQuery 1.11

Ответ №2:

В jQuery 1.7 вы можете использовать обработчик .on() для привязки вновь созданного элемента к событию ‘click’:

 <script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>').on('click', 'ul li a', function () {
            alert('thank you for clicking');
        });
    });
</script>

(это относится к исходному примеру).

Ответ №3:

 $(document).on('click','ul li a', function(){
      // Content Code
});

Ответ №4:

.live устарел с версии 1.7. Попробуйте это (jquery 2.1.4):

HTML:

 <a id="load_list" href="#">Load the list</a>

<ul></ul>

jQuery:

 $(document).ready(function() {

 $('#load_list').click(function() {
   $('ul').html("");    

   $("<li/>", {
        "class" : "someClass",
        text: "Click here",
        click: function() {
          alert($(this).text());
        }
      }).appendTo('ul');
  });
});

или что-то вроде этого (но я не нашел, как прикрепить щелчок к привязке):

 $(document).ready(function() {
 $('#load_list').click(function() {
   $('ul').html("");

   $('<li><a href="#">Click here</a></li>').on({
      click: function() {
        alert("hoi");
      }
    }).appendTo("ul");
 });
});

Ответ №5:

поскольку вы применяете событие щелчка до того, как элемент будет помещен в dom, вам нужно использовать .live()

Ответ №6:

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

 <a id="load_list" href="#">Load the list</a>

<ul></ul>

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>');
        $('ul li a').unbind('click', thanks());//Remove existing binds
        $('ul li a').bind('click', thanks());//Remove existing binds
        return false;
    });
    function thanks() {
        alert('Thank you for clicking');
        return false;
    });
    $('ul li a').bind('click', thanks());
});
</script>

1. Спасибо за отрицательный отзыв, кем бы вы ни были. :/ Я дал правильный новый код с комментариями.

2. Вероятно, потому, что это должен быть самый болезненный способ из возможных.