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

Question

Читая о новых спецификациях для новейшей библиотеки jQuery 1.x, она говорит использовать .on чтобы прикрепить события, которые работают для динамически создаваемых элементов jQuery, однако, я не могу получить эту работу вообще. В моем $(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();
        }
    });
});

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

Я использую библиотеку 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>

Первый раз, когда я нажимаю на него, он работает, но во второй раз, когда [ 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" Необходимо оценивать для каждого клика, который происходит на странице. Обычно вы используете содержащий элемент, к которому вы добавляете динамический контент.