Question

$('a').click(function() {
    _link = $(this).attr('href');
    loadContent(_link);
    return false;
});

function loadContent(href){
    $('#content').load(href + ' #content > *)
}

我将所有<a>与.click()绑定，只会更改#content的内容。但是，新<a>中的新#content不能使用之前的.click()功能。我该如何重新绑定它？

在.load()似乎正常工作后再次添加该功能

function loadContent(href){
    $('#content').load(href + ' #content > *);

    $('a').click(function() {
      _link = $(this).attr('href');
      loadContent(_link);
      return false;
    });
}

但是这会弄乱已经绑定的's'并导致它在循环中运行吗？

Answer 1

使用event delegation将事件绑定到动态添加的元素（在本例中为a s）：

$(document).on('click', 'a', function() {
    _link = $(this).attr('href');
    loadContent(_link);
    return false;
});

事件委托通过监听冒泡到不变的祖先的事件来工作（如果没有方便的话，document是最好的默认值，不要使用'body'，因为它有与样式相关的点击错误）。它然后将jQuery选择器应用于bubble bubble中的元素，然后将你的函数应用于导致事件的匹配元素。优点是元素只需要在事件时存在，现在当处理程序已注册时。

Answer 2

当您最初添加click事件侦听器时，它仅绑定到现有锚标记。绑定事件侦听器的代码运行一次，并且不会再为任何新的锚标签运行。

您可以尝试将侦听器附加到正文，以便在任何锚标记上单击事件。

$('body').on('click', 'a', function() {...});

如何在.load（）之后重新绑定.click（）函数？

2 个答案: