Javascript jQuery On（）：性能或正确语法

我的HTML中有2个按钮。“批准”和“拒绝”。当用户按下批准按钮时，我想将其隐藏并显示拒绝按钮，然后单击拒绝按钮隐藏批准按钮并显示“批准”按钮

我让jquery使用

live（）

方法来处理它。当我使用

jQuery.html（）

方法添加Reject时。而且效果很好。但现在我需要在project上升级jquery，新的jquery需要使用

on（）

方法

现在我的问题是当我使用

$("td").on("click",".approve", function(){});

它触发事件两次（下面的HTML），但当我

$(document).on("click",".approve", function(){});

它很好用。虽然我不完全了解哪种方法更有效，在移动设备和PC上的性能更好。但我经常需要动态绑定，并且总是被“打开”方法卡住。它们并不总是像live方法那样简单

HTML是

<table class="applyuserholidaygrid">
  <tr data-id="194" data-date="2014-01-24">
    <td class="holidayreject" >sumit</td>
    <td class="accepttd"><div class=" ui-state-default ui-corner-all "><span class="ui-icon approve ui-icon-circle-check"></span></div></td>
    <td class="canceltd">&nbsp;</td>
  </tr>
</table>

苏米特

---

你知道什么是最好的方法吗。谢谢。

这一个触发两次，因为有嵌套的

td

标记将同时拾取单击事件。（添加将停止它两次触发，因为它在处理一次后将不会继续在dom树上运行）

关于性能，我认为最好将事件绑定到尽可能接近目标元素的位置。所以在这种情况下

$('.applyuserholidaygrid').on('click', '.approve', function() {});

如果动态添加了带有

.approve

的元素，则可能是最好的。如果不只是直接绑定到它：

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

---

与任何性能问题一样，我想说，尝试这两种方法，并将它们相互比较。在这种情况下，可能最好使用可读性最好的代码。

您需要阅读文档并了解

.on（）

的功能。如果

$（）

选择器匹配两个元素或动态元素，则会出现问题。HTML中没有类为

approve

的元素。@SLaks如果选择器匹配两个元素，则没有问题。它只对你点击的那个按钮开火。@Barmar:你说得对；我指的是两个嵌套元素。您的表在另一个表中吗？

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