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吗？我知道自jQuery 1.7以来不再使用.live。 .click也不起作用，因为我已经尝试过了。还有哪些其他选择？

Answer 1

要使on方法注册委托事件处理程序（就像delegate方法一样），您需要为元素指定一个选择器，并将其应用于已存在的元素

例如：

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

最好将它应用于父元素，尽可能靠近动态添加的元素而不是"body"，以尽可能地缩小范围。否则，需要针对页面中发生的每次点击评估选择器".dropdown"。通常，您将使用添加动态内容的contains元素。

jQuery - 如何使.on事件为动态创建的HTML工作？

1 个答案: