Question

在这个非常简化和最小化的示例中，已为每个 a 标记定义了单击事件处理程序（单击链接后会显示简单警报）。单击该按钮后，第二个链接将添加到页面中。

但如果单击此新添加的链接，则不会调用事件处理程序。知道为什么吗？应该添加/更改什么，以便新添加的元素知道主页上定义的脚本？

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
        $("document").ready(function() {
            $("a").click(function() {
                alert("link is clicked");
                return false;
            });
            $("#btn").click(function() {
                $("#second").html("<a href='#'>Second link</a>");
            });
        });
</script>
</head>
<body>
    <div id="first">
        <input id="btn" type="button" value="Get new content"/>
        <a href="#">Original link</a>
</div>
<div id="second"/>
</body>
</html>

在这种特殊情况下，应该做什么，以便第二个链接知道 script 部分中定义的事件处理程序，以便在单击链接后显示警报？

您对解决这类情况的建议是什么？如何让页面上新添加的元素知道以前定义的Javascript代码？

Answer 1

因为您绑定了网页上的所有现有链接。尝试：

$('a').live('click', function(){
    alert('link is clicked');
    return false;
});

jQuery的live函数实际上将事件处理程序附加到document.body，然后检查事件是否匹配，当它最终冒泡到正文时。因此它适用于页面上的所有当前和未来对象。

请注意，如果这些链接位于特定容器中，则此代码更有效：

$('#container').delegate('a', 'click', function(){
    ...
});

delegate仅检查冒泡到#container的事件，因此jQuery不会检查页面上任何位置的每次点击。

Answer 2

您需要将.click(function())替换为.delegate()或（不太优先）.live("click", function())。

这是因为click()绑定到现有元素，而.delegate()将

将处理程序附加到一个或多个事件对于匹配的所有元素选择器，现在或将来，基于在一组特定的根元素上。

Simplified，.delegate()将一个侦听器附加到指定的元素，当它收到bubbled DOM event时会捕获它并在目标元素上执行必要的函数。

页面上新添加的元素，可识别先前定义的Javascript代码

2 个答案: