javascript - 如何防止调用 jQuery 重复函数

Question

我有一个on('click')这样的 jQuery 函数：

function enabled_click() {
  $('.btn_enabled').on('click', function() {
    alert('CLICKED');
  });
}

然后我有另一个像这样的帖子功能

$(document).on('click', '.btn_add_link', function(e) {
  var url = 'www.xxx.my-function';
  post_data(url, function(data) {
    if (data.status == 'success') {
      $('#my_wrapper').append(data.response);
      enabled_click();
    } else {
      alert('error');
    }
  });
  return false;
});

post 函数将附加另一个.btn_enabled按钮。如果我没有enabled_click()在成功帖子上调用该函数，那么新添加的.btn_enabled将无法触发onclick函数。

但是，如果我enabled_click()像上面那样调用该函数，那么已经存在.btn_enable的函数将调用两次 onclick 函数并发出两次警报CLICKED。有没有办法让它只发出一次警报？

标签： javascriptjquery

Answer 1

你可以这样写

document.on('click', '.btn_enabled', function() {
    alert('CLICKED');
})`

将事件委托给dom，它使一切变得和谐。