php - 如果我的选项卡内容在各处都相同，为什么我的 JQuery 脚本似乎只在开始浏览我的选项卡之前才起作用？

Question

如果我的选项卡内容在各处都相同，为什么我在所有页面中使用的 JQuery 脚本似乎只在开始浏览我的选项卡之前才起作用？

我有一个使用 JQuery 和 AJAX 构建的选项卡 View 网页。

这是我的 JQuery 函数:

$(document).ready(function(){
    $(".box .more").click(function(event){
        alert('test'); 
    });

    $("a.linkTab").click(function(event){
        var tabID = $('.linkTab')[0].toString().split('#')[1];
        $.ajax({
            url : "loadPage.php?tabID=" + tabID,
            success : function (data) {
                $('#body').html(data);
            }
        });
    });
});

这是我的正文网页:

<div id="header">...</div>
<div id="body">
    <div class="box">
        <p class="more">LinkLike</p>
    </div>
</div>
<div id="footer"><a href="#9">9</a></div>

loadPage.php 仅包含 Ajax 脚本发送的所需页面。

我的选项卡系统运行良好，我可以在我想要的页面中导航。在导航之前，当我单击 LinkLike 时，会出现警报。但是，当我浏览选项卡时，当我单击时，什么也没有。

为什么 JQuery 脚本似乎只在开始浏览之前才起作用。

重要的是，我从 php 导入的文件包含与第一个文件完全相同的正文。该文件包含:

<div class="box">
    <p class="more">LinkLike</p>
</div>

Answer 1

尝试

$(document).delegate(".box .more","click",function(event){
        alert('test'); 
    });

原因可能是您可以动态生成链接，并且事件处理程序不会将自身附加到动态插入到 DOM 的元素上。以前使用 .live 但现在已弃用，如果您使用 jquery 1.7+ 版本，您可以使用 .on 方法，否则您可以使用 delegate 方法将事件处理程序附加到动态内容。不过你也可以在ajax请求的成功回调中重新绑定(bind)事件

$.ajax({
            url : "loadPage.php?tabID=" + tabID,
            success : function (data) {
                $('#body').html(data);
                $(".box").bind("click");
            }
        });

jQuery.on 版本1.7+

jQuery.delegate