jQuery - 如何使 .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" 需要针对页面中发生的每次点击进行评估。通常，您会使用向其中添加动态内容的包含元素。