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

问题描述

| 在这个非常简化和最小化的示例中，已经为每个标签定义了单击事件处理程序（单击链接后将显示简单警报）。单击按钮后，第二个链接将添加到页面。但是，如果单击此新添加的链接，则不会调用事件处理程序。知道为什么吗？应该添加/更改什么，以使新添加的元素了解主页上定义的脚本？

<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>

在这种特定情况下，应该怎么做才能使第二个链接知道脚本部分中定义的事件处理程序，以便在单击链接后显示警报？您对解决此类情况有何建议？您如何使页面上新添加的元素了解以前定义的Javascript代码？

解决方法

因为您要绑定到页面上的所有现有链接。尝试：

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

jQuery的live函数实际上将事件处理程序附加到document.body，然后检查事件是否最终匹配到最终时是否匹配。因此，它将适用于页面上的所有当前和将来的对象。请注意，如果这些链接在特定的容器中，则此代码会更有效：

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

delegate仅检查会上升到#container的事件，因此jQuery不会检查页面上任何位置的每次单击。 ,您需要将.click(function())替换为.delegate()或（优先选择）.live(\"click\",function())。这是因为“ 10”绑定到现有元素，而“ 8”将绑定到现有元素将处理程序附加到一个或多个事件对于所有与选择器，现在或将来基于在一组特定的根元素上。简化后的“ 8”将侦听器附加到指定的元素，并且当它接收到冒泡的DOM事件时，它将捕获该侦听器并在目标元素上执行必要的功能。

javascript 代码代码代码元素元素元素先前定义定义定义新增识别识别识别面上