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

Ответ 1

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

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

Пример в Интернете: http://jsfiddle.net/J5QJ9/

Ответ 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

.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");
 });
});

Ответ 4

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

Ответ 5

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

<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>

Ответ 6

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