jQuery - Как сделать работу .on для динамически созданного HTML?

Question

Чтение новых спецификаций для новейшей библиотеки jQuery 1.x, говорит, что для добавления событий, которые работают для динамически созданных элементов jQuery, используется .on, однако, похоже, я вообще не получаю эту работу. В моей $(document).ready функции У меня есть следующие:

JQuery:

$(".dropdown").on("click", function(event) { 
    event.preventDefault(); 
    var type = $(this).text() == '[ Read more... ]' ? 'expand' : 'collapse'; 
    var theDiv = type == 'expand' ? $(this).parent().next("div") : $(this).parent().prev("div"); 
    var theId = $(this).attr("id"); 
    $(this).parent().remove(); 
    var vText = theId == 'reqMat' ? 'Every candidate is required to submit a headshot and candidate statement.' : 'To strengthen your candidacy and let people know what you\'re all about, we invite you to create a campaign video.'; 

    theDiv.animate({height: 'toggle'}, 500, function(){ 
     if (type == 'expand') 
      theDiv.after('<p class="desc"><a href="#" class="dropdown" id="' + theId + '">[ Collapse Information... ]</a></p>'); 
     else 
      theDiv.before('<p class="desc">' + vText + ' <a href="#" class="dropdown" id="' + theId + '">[ Read more... ]</p>'); 

     if (theId == 'optMat' && type == 'expand') 
     { 
      var sVidWidth = $("#sampleVideo").width(); 
      $("#sampleVideo").css({'height': (sVidWidth/1.5) + 'px'}); 
     } 
     else if (theId == 'optMat' && type == 'collapse') 
     { 
      var iframe = $('#sampleVideo')[0]; 
      var player = $f(iframe); 
      player.api('pause'); 
     } 

     if (theId == 'reqMat' && type == 'expand') 
     { 
      handleBullets(); 
     } 
    }); 
}); 

Ok, так что это будет падать вниз [ Read more... ] текст и превратить его в [ Collapse Information... ] строку, которая будет идти под фактического содержания, который будучи расширен. Но когда я нажимаю на текст [ Collapse Information... ], он ничего не разрушает, вместо этого он переходит в верхнюю часть страницы, имея, таким образом, href="#", но использование .on должно предотвращать это, когда применяется event.preventDefault(); правильно?

Am с использованием библиотеки JQuery найти здесь: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Мой HTML выложена как так, если это даже вопросы:

<h4>Header 1</h4> 
<p class="desc">Brief description. <a href="#" id="reqMat" class="dropdown">[ Read more... ]</a></p> 
<div style="display: none;"> 
    <p>More information is in here...</p> 
</div> 
<h4>Header 2</h4> 
<p class="desc">Brief description. <a href="#" id="optMat" class="dropdown">[ Read more... ]</a></p> 
<div style="display: none;"> 
    <p>More information is in here...</p> 
</div> 

В первый раз я нажимаю, он работает, но 2-й время, когда показано [ Collapse Information... ], что оно совсем не работает. Поэтому он не присоединяется к динамически созданным <p class="desc"><a href="#" class="dropdown" id="' + theId + '">[ Collapse Information... ]</a></p>.

Почему бы и нет? Есть ли что-то еще, что я должен использовать вместо .on? Я знаю, что .live больше не используется с jQuery 1.7. .click не будет работать так, как я уже пробовал это. Какие еще существуют варианты?

Answer 1

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

Например:

$("body").on("click", ".dropdown", function(event) { 

Предпочтительно, вы должны применить его к родительскому элементу, как можно ближе к динамически добавленных элементов, а не "body", чтобы уменьшить объем, насколько это возможно. В противном случае селектор ".dropdown" должен быть оценен для каждого щелчка, который происходит на странице. Обычно вы должны использовать содержащийся элемент, к которому вы добавляете динамический контент.