Question

我写了这段代码

   $(document).on("click", "#tasksTable tr", function(e) {
       var taskId = this.id;
       var chkBoxCompleted = $(this).find('input:checkbox:first');
       var chkBoxNotRequired = $(this).find('input:checkbox:last');

       chkBoxCompleted.on('click', function(){
           alert("called when I click second time on checkbox")
       });

       chkBoxNotRequired .on('click', function(){
           alert("called when I click second time on checkbox")
       });
    });

我的html就像

<table width="100%"  cellpadding="0" cellspacing="0" style="border-width: 0px 1px 1px 0px;" id="tasksTable">
   <tr id="9">
   <td class="blueFont_inset"><span>22/05/2014 00:48</span>&nbsp;</td>
   <td class="blueFont_inset"><input type="checkbox" name="completedTask[]"  id="completedTask" value="N"><span>&nbsp;</span></td>
   <td class="blueFont_inset"><span>Completed Date</span>&nbsp;</td>
   <td class="blueFont_inset"><input type="checkbox" name="notRequiredTask[]" id="notRequiredTask" value="N"><span>&nbsp;</span></td>
  </tr>
</table>

这是这个表中的多行。

当我第二次单击任一复选框时，单击复选框的事件。我在IE和Chrome中尝试过它。这是因为我在表格行点击事件中使用它吗？但我也希望使用该表行单击事件。

我正在使用

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

Answer 1

您的第一个点击事件正被TR上的点击侦听器拦截。我没有使用点击绑定将事件绑定到内部元素，而是将它全部绑定在document.ready上，并使所有引用相对于被点击的元素父范围。

Answer 2

尝试在再次绑定之前删除复选框单击处理程序，否则单击事件会一次又一次地绑定，而单击事件将传播到tr。

<强>价： http://api.jquery.com/off/

最好避免在父事件处理程序中绑定事件处理程序。

在使用jquery第二次点击时调用的复选框的click事件

2 个答案: