javascript - jquery on() 不能处理点击事件？

Question

这是我的 jquery:

$(document).ready(function(){
    $("div#overlay div#getFBid div#overlayClose").on("click", function(){
        console.log("test")
    });
});

这是我的 html，用 ajax 调用:

<div id="overlay">
    <div id="getFBid">
        <div id="overlayClose">&nbsp;</div>
        <h1>Wat is mijn Facebook page ID?</h1>
        <div id="fbPageURLholder">
            <input type="text" id="fbPageURL">
        </div>
    </div>
</div>

我不知道我做错了什么，我显然错过了一些我认为应该非常简单的东西。有什么想法吗？

附言。我应该补充一点，我在 jquery.com 上看到 live 函数已被弃用，我应该使用 delegate 或 on。

Answer 1

这个:

$("div#overlay div#getFBid div#overlayClose")

可以减少到

$('#overlayClose')

因为您的文档中永远只有该 ID 的一个元素。

至于问题；如果您使用 AJAX 加载了内容，那么当您绑定(bind)您的监听器时，它在 DOMReady 中将不可用。

要绑定(bind)到尚未添加的元素，您需要使用实时委托(delegate):

$(document).on('click', '#overlayClose', function() {
    console.log('test');
});

$(document) 应该是尽可能接近元素的东西， 在 DOMReady 时可用，并且不会被销毁。