1

这是我的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 功能已被弃用，我应该使用委托或 on。

4

2 回答 2

8

这：

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

可以简化为

$('#overlayClose')

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

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

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

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

where$(document)应该是尽可能接近元素的东西，在 DOMReady中可用，并且不会被破坏。

于 2012-07-30T09:53:41.693 回答
0

你导入了 jQuery 吗？

这对我有用，单击关闭将在控制台中记录一条测试消息：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"       type="text/javascript"></script>
</head>
<body>
    <div id="overlay">
        <div id="getFBid">
            <div id="overlayClose">Close</div>
                <h1>Wat is mijn Facebook page ID?</h1>
                <div id="fbPageURLholder">
                    <input type="text" id="fbPageURL">
                </div>
            </div>
     </div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function(){
        $("#overlayClose").on("click", function(){
            console.log("test")
        });
    });
</script>

希望有帮助。

于 2012-07-30T10:07:16.297 回答