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中可用，并且不会被销毁。

Answer 2

你导入了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>

希望有所帮助。

jquery on（）不能处理click事件？

2 个答案: