jQuery on click 仅适用于动态生成的内容

Question

我正在使用 jQuery 1.9.1，并且有两种情况可以通过 AJAX 调用加载相同的内容。由于有两种情况，我使用类作为选择器而不是 ID，因为 ID 仅适用于第一个实例。

场景一，在菜单中，一个带有 class="firstlink" 的 href 元素。

场景二，一个自定义的自动完成，它输出一个链接作为搜索词，同样，这个链接有“firstlink”类。在文档中调用自动完成脚本。

以下工作在页面上的第一次和后续加载/点击时单击菜单项类“firstlink”。

$(document).ready(function(){
    $(".firstlink").click(function(){
        $.ajax({url:"resources/pageone.html",dataType:"html",success:function(result){
        $(".content-area").html(result);
    }});
});
});

因为自动完成将第二个链接与“firstlink”类添加到 DOM 中，以上不适用于同一个类的动态生成链接，所以我必须使用“on”，我正在使用这样:-

$(document).ready(function(){
    $(document).on("click",".firstlink", function () {
        $.ajax({url:"resources/pageone.html",dataType:"html",success:function(result){
        $(".content-area").html(result);
    }});
});
});

这适用于类“firstlink”的动态生成元素，但不适用于 DOM 中类“firstlink”的菜单项。

我也试过在同一个文档准备功能：-

$('.firstlink').on("click" ,function() {
        $.ajax({url:"resources/pageone.html",dataType:"html",success:function(result){
        $(".content-area").html(result);
    }});
});
});

这适用于具有类“firstlink”的静态（已存在于 DOM 中）元素，但不适用于具有相同类名的动态创建元素。

我确信这一定是有原因的，并且我不需要为同一个函数定义两次相同的代码，如 "$(".firstlink").click(function(){" 和"$(document).on("click",".firstlink", function () {" 产生相同的结果 - 加载相同的 AJAX 内容。

示例 HTML 代码：-

静态 HTML：-

<ul>
    <li><a href="#" class="firstlink">click here first</li>
    <li><a href="#" class="secondlink">click here second</li>
    <li><a href="#" class="thirdlink">click here third</li>
</ul>

自动完成（jQuery）动态生成的链接是这样的：-

<div class="search-output">
    <a href="#" class="firstlink">please click here</a>
</div>

`

Answer 1

您应该可以使用委托事件，即：.on("click", ".firstlink", function...，即，这应该是首选方法：

$(document).on("click",".firstlink", function (e) {
    $.ajax({url:"resources/pageone.html",dataType:"html",success:function(result){
    $(".content-area").html(result);
    return false;
}});

另外，因为您提到您正在使用锚标记（“链接”），您可能不希望默认浏览器操作为您的链接触发（它们可能正在刷新页面）。从事件处理程序返回 false 将防止这种情况发生（相当于调用 e.preventDefault() 和 e.stopPropagation()）。

确保没有其他事件处理程序（在 document 或 direct 之前）不调用 stopPropagation（或返回 false）。这将阻止事件到达文档。

这是一个fiddle，表明它正在工作

另外，.click(function...) 与 .on("click", function()... 相同 http://api.jquery.com/click/
http://api.jquery.com/on/