javascript - 如何在 .load() 之后重新绑定(bind) .click() 函数？

Question

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

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

我有所有 <a>与 .click() 绑定(bind)这只会改变 #content 的内容.然而，新<a>从新#content不使用以前的 .click()功能。我怎样才能重新绑定(bind)它？

在.load()之后再次添加函数似乎有效

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

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

但这会不会弄乱已经绑定(bind)的 `s' 并导致它循环运行？

Answer 1

使用event delegation将事件绑定(bind)到动态添加的元素(在本例中为 as):

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

事件委托(delegate)通过监听冒泡到一个不变的祖先的事件来工作(如果没有方便的话，document 是最好的默认值，不要使用 'body' 作为它有与样式相关的点击错误)。 然后将 jQuery 选择器应用于气泡链中的元素，然后将您的函数应用于引起事件的匹配元素。优点是元素只需要在事件时间和现在注册处理程序时存在。