javascript - 将多个 .php 文件加载到一个 div 中

Question

你好，我有这段代码可以将 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>

Answer 1

您只需将另一个点击事件绑定(bind)到您通过load() 函数加载的图像(或表体)。但是，您可能会遇到点击不起作用的问题，原因如下:

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

您可能会期望，一旦您的 php 文件内容被加载(其中包含 .image 元素)，然后单击它们将触发您声明的操作，但它不会 - 那些.image 是新的 DOM 元素，它们缺少事件绑定(bind)过程，该过程仅在创建 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 文件中插入 .image 单击事件绑定(bind)或使用某种委托(delegate)，例如:

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

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