在导入的页面行上运行母版页脚本

Running Master page scripts on imported page lines

本文关键字：运行 母版页 脚本 导入      更新时间：2023-09-26

我使用这样的链接将一些 php 导入到div 块中

<a class="ajax-link" href="login.php">Login/Register</a>

和这样的脚本（使用 jquery load 来填充div 块）。

$(function() {
    $("a.ajax-link").on("click", function(e) {
        e.preventDefault();
        $("#body-element").load(this.href);
    });
});

现在假设运行 php 部分后加载的 php 文件还包含一个带有"ajax-link"类的链接，我也希望该链接更改该div 块的内容

<?php 
...
?>
<a class="ajax-link" href="view.php">View content</a>

但是，它似乎完全忽略了它并打开了一个新页面，而不是在其上运行上述功能。

所以基本上...如何在页面的导入部分上运行该脚本？

这就是事件委派派上用场的地方。

$(document.body).on("click", "a.ajax-link", function(e) {
    // ... 
});

此代码需要重新运行...动态添加的对象不包括在以前的单击中。

$("a.ajax-link").on("click", function(e) {
    e.preventDefault();
    $("#body-element").load(this.href);
});

。你也可以...关闭旧观察程序。

$("a.ajax-link").off("click");

更新：

尝试。。。

$("a.ajax-link")
  .off("click")
  .on("click", function(e) {
    e.preventDefault();
    $("#body-element").load(this.href);
});

您还必须在新添加的链接上应用单击侦听器，因为在应用单击侦听器时必须将元素加载到 DOM 中才能应用它。但是，如果您只是重新运行相同的代码，则会遇到在第一个 ajax-link 上有两个事件侦听器的问题。

试试这个：

// We still use on doc ready to be sure the 
// first link is present before applying listener
$(function() 
{
    // Reset all listeners on ajax-links and 
    // then apply listeners via function
    resetAjaxLinks();
});
// This function will remove any ajaxlink 
// listeners and then apply them correctly
function resetAjaxLinks()
{
    // Remove event listeners and then on click....
    $("a.ajax-link").off('click').on("click", function(e) 
    {
        // Prevent default link action...
        e.preventDefault();
        // Load in your content...
        $("#body-element").load(this.href);
        // Once content is loaded in, reset event listeners!
        resetAjaxLinks();
    });
}

编辑：这不是最好的方法。请改用此答案指定的事件委派。

相关文章：