Question

我正在使用像这样的链接将一些php导入div块

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

和这样的脚本（使用jquery加载来填充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>

但是它不是在上面运行上面提到的功能，而是完全忽略它并改为打开一个新页面。

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

Answer 1

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

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

Answer 2

此代码需要重新运行...以前点击时不会包含动态添加的对象。

$("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);
});

Answer 3

您还必须在新添加的链接上应用单击侦听器，因为在应用单击侦听器时必须将该元素加载到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();
    });
}

编辑：这不是最好的方法。相反，请使用this answer指定的事件委派。

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

3 个答案: