Question

我有数百个

<button class="lb">
  <div class="l"></div>
  <div class="c">2</div>
  <div class="r"></div>
</button>

当页面加载时，其中一些已经在DOM中，而其他一些是通过javascript动态添加的。

当有人点击按钮时，按钮内div class =“c”内的值应该加1。

我以为我可以这样做

$(".lb").on("click", function(event) {
  $('.c', this).html(parseInt($('.c', this).html()) + 1);
  $(this).unbind('mouseout');
});

但这只适用于在pageload上加载的元素，而不适用于插入新的每个JS的元素。

我无法找到我所缺少的东西，并希望得到任何暗示。

谢谢！圣拉斐尔

Answer 1

将事件委派用于.lb或document的父级。正如@Zolton Toth指出的那样，你应该使用off而不是弃用unbind。

$(document).on("click", ".lb", function(event) {
  $('.c', this).html(parseInt($('.c', this).html()) + 1);
  $(this).off('mouseout');
});

Answer 2

您缺少使用.on()作为代理人的一些概念：

$(' --CONTEXT-- ').on('click', ' -- YOUR ELEMENT -- ', function () {

});

// like-wise to "unbind" using the new methodology
// you would use .off()
$(' --CONTEXT-- ').off('click', '-- YOUR ELEMENT --');

所以把它放在例子中：

$(document).on('click', '.lb', function () { });

但是，当然这会使上下文（或者它会向“冒充”）文件过高。尝试使用围绕此项目出现的大父母，这将加快表现。

$('#someParent').on('click', '.lb', function () { });

jQuery .on-method不处理动态添加的项目

2 个答案: