Question

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

我使用live()方法为jquery工作。当我用jQuery.html()方法添加Reject时。它工作正常。但是现在我需要在项目上升级jquery，而新的jquery需要使用on()方法。

现在我的问题是当我使用

时

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

它两次点火事件（HTML下面），但是当我做

时

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

它运作得很好。虽然我不完全了解哪种方法更有效，并且在移动设备和PC上都能提供更好的性能。我经常需要动态绑定并始终坚持使用“on”方法。它们并不总是像.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>

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

Answer 1

这一次会触发两次，因为有嵌套的td标记会同时拾取点击事件。（添加event.stopPropagation将停止它两次触发，因为在处理一次后它不会继续向上移动dom树）

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

关于性能，我想说最好让事件尽可能接近目标元素。所以在这种情况下

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

假设动态添加.approve元素，

可能是最好的。如果不是直接绑定它：

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

与任何性能问题一样，我会说尝试两者并将它们相互对照。它可能几乎没有区别，在哪种情况下最好使用最易读的代码。

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

1 个答案: