Question

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

场景一，在菜单中，一个href元素，其中class =＆＃34; firstlink＆＃34;。

场景二，一个自定义的自动完成功能，它输出一个链接作为搜索词，同样，此链接具有类＆＃34; firstlink＆＃34;。自动完成脚本在文档中调用。

以下作品点击菜单项类＆＃34; firstlink＆＃34;在页面上的第一次和后续加载/点击。

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

因为自动完成功能会在类＆＃34; firstlink＆＃34;中添加第二个链接。进入DOM，上面的内容对于同一个类的动态生成的链接不起作用，所以我必须使用＆＃39;，我正在使用这样的： -

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

这适用于动态生成的元素，类为＃34; firstlink＆＃34;但它不适用于带有类＆＃34; firstlink＆＃34;的菜单项。在DOM中。

我也尝试过相同的文档就绪功能： -

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

这适用于带有类＆＃34; firstlink＆＃34;的静态（已经存在于DOM中）元素。但不能使用相同类名的动态创建元素。

我确信必须有这样的理由，并且我不需要为同一个函数定义两次相同的代码，如＆＃34; $（＆＃34; .firstlink＆＃34;）。点击（function（）{＆＃34;和＆＃34; $（文档）.on（＆＃34;点击＆＃34;，＆＃34; .firstlink＆＃34;，function（）{＆＃34;产生相同的结果 - 加载相同的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;
}});

另外，因为您提到您正在使用锚标记（＆＃34;链接＆＃34;），您可能不希望触发默认的浏览器操作（它们可能会刷新页面）。从事件处理程序返回false将阻止它（它相当于调用e.preventDefault（）和e.stopPropagation（））。

确保没有其他事件处理程序（在文档或直接之前）没有调用stopPropagation（或返回false）。这样可以防止事件到达文件。

这里显示fiddle显示正常工作

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

点击上的jQuery仅适用于动态生成的内容

1 个答案: