jquery on()不能处理click事件？

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>

我无法弄清楚我做错了什么,我显然错过了一些我认为应该非常简单的事情.有什么想法吗？

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

Answer 1

这个:

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

可以减少到

$('#overlayClose')

因为你的文档中只有一个ID的元素.

至于问题; 如果您使用AJAX加载了内容,那么当您绑定侦听器时,它将无法在DOMReady中使用.

要绑定到尚未添加的元素,您需要使用实时委托:

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

凡$(document)应尽量靠近元素尽可能的东西,这是可以在domready中,并没有被破坏.