将多个 .php 文件加载到一个 div 中答案

【问题标题】：Loading several .php file into one div将多个 .php 文件加载到一个 div 中
【发布时间】：2014-12-27 12:31:54
【问题描述】：

您好，我有这段代码可以将 php 文件加载到 div 中。它可以工作，但我需要将下一个文件加载到这个 div 中。

<script type="text/javascript">
    $(function() {
        $("a.load").on("click", function(load) {
            load.preventDefault();
            $("#zaw").hide().load(this.href).fadeToggle(1000);
        });
    });
</script>

<li><a class="load" href="zzz.php">zzz</a></li>

如果我单击“zzz”链接将文件加载到我的 div（带有图像的文件表）中，我需要隐藏此页面并通过单击图像加载下一个。

更新

现在工作

<script type="text/javascript">
    $(function() {
        $("a.load").on("click", function(load) {
            load.preventDefault();
            $("#zaw").hide().empty().load(this.href).fadeToggle(1000);
        });
    });
</script>

【问题讨论】：

需要更多说明
单击链接“zzz”将文件“zzz.php”加载到 div #zaw（zzz.php 将其表中包含图像）我需要通过单击图像卸载“zzz.php”并加载其他文件
然后你可以像
希望你明白我的意思
类似的东西？ jsfiddle.net/kjyaroxt

标签： javascript php jquery html css

【解决方案1】：

您只需要将另一个点击事件绑定到您通过load() 函数加载的图像（或表格主体）。但是，您可能会遇到一些点击无法正常工作的问题，原因如下：

如果您附加两个点击处理程序，一个用于a.load，第二个用于.image，那么只有第一个事件实际上会绑定到它的元素，而第二个事件不会被附加，因为，好吧, .image 还不存在 - 直到你加载它。

您可以预期，一旦您的 php 文件内容被加载（其中包含 .image 元素），然后单击它们将触发您声明的操作，但它不会 - 那些 .image 是新的 DOM 元素，他们错过了一个事件绑定过程，该过程仅在创建 DOM 时完成一次（或者如果您使用 $.(document).ready()，则 DOM 已准备好）。

因此，为了使这些点击生效，您需要将它们附加到 load() 函数回调中，如下所示：

$("a.load").on("click", function(load) {
        load.preventDefault();
        $("#zaw").hide().load(this.href, function(){
            $(".image").on("click", function(e) {
            $("#zaw").hide().load(/* load what you want */);
        });
    })
    .fadeToggle(1000);
});

或在您正在加载的 php 文件中插入 .imageclick 事件绑定或使用某种委托，例如：

$(document).on('click', '.image', function(){
    /* do what you want */
});

这将确保即使是新的、动态创建的 DOM 元素也会触发您想要的操作。

【讨论】：