选中复选框后执行两次功能答案

【问题标题】：function executed twice after checkbox checked选中复选框后执行两次功能
【发布时间】：2016-07-02 23:38:15
【问题描述】：

我使用下面的代码

$("#cc1").unbind('click').click(function(e) {
    //somefunction
});

为了在点击 cc1 按钮后执行一个功能。有了这段代码，一切都很好。

当我使用下面的代码时

$("#cc1").unbind('click').click(function(e) {

    if($('#cc').is(':checked')){

    }

    //somefunction
});

为了执行与上面相同的函数，但当检查CC复选框时，单击按钮支付并单击按钮支付，函数不止一次执行，我收到DB Reading ...

中的错误

有什么问题？

当点击支付按钮时，应用程序会将一些变量传递给函数以进行更新 - 将数据导入数据库。如果选中 cc，则应用传递不同的数据。上面的页面包含一个按钮（支付），当按下该按钮时，支付是通过现金进行的。如果选中 cc，则通过信用卡付款。

【问题讨论】：

检查这个：e.stopImmediatePropagation();event.stopImmediatePropagation()
您能否尝试提供一个我们可以运行的 sn-p 以重现您的问题？
如果#pay按钮是提交按钮？
我怀疑需要解除绑定/重新绑定。可能有一种更清洁的方法......你想用它来完成什么？
不，您可以绑定多个点击事件，这就是为什么我怀疑为什么需要它（怀疑存在逻辑/设计缺陷） - 我怀疑这就是这里发生的事情 - 绑定了多个点击事件。

标签： javascript jquery button checkbox

【解决方案1】：

根据你的描述，可能下面的代码可以帮助到你：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <div>
      <form id="form">
        <input type="button" name="cc1" value="cc1" id="cc1">     
        <input type="button" name="pay" value="pay" id="pay">    
        <input type="checkbox" name="cc" id="cc">     
      </form>
 <script>

$("#cc1").unbind('click').click(function(e) {
      //somefunction
  alert("test cc1");
    });

$("#pay").unbind('click').click(function(e) {
     if($('#cc').is(':checked')){
       //somefunction
       alert("credit");
     }
     else{
       //anotherfunction
       alert("cash");
    }
   }); 
</script> 
</body>

【讨论】：

【解决方案2】：

如果您绑定了动态侦听器并且发生了这种情况，则会出现此问题。这将触发 2 次点击，因为第二个侦听器没有取消绑定。这些点击会叠加。

HTML：

<input type="checkbox" id="cc1"> Double Click<br>
<input type="checkbox" id="cc2"> Single Click

JS：jsfiddle

// Static Listener
$("#cc1").unbind('click').click(function(e) {
   checkClicked($(this));
});
$("#cc2").unbind('click').click(function(e) {
   checkClicked($(this));
});

/* Dynamic Listener - Typically happens when Ajax data is being loaded,   
 * DOM nodes are being added & listeners are being re-attached to the 
 * new form fields:
 */
$("#cc1").click(function(e) { // .unbind('click')
  checkClicked($(this));
});
$("#cc2").unbind('click').click(function(e) {
  checkClicked($(this));
});

function checkClicked(chkBx) {
  console.log('clicked');
  if(chkBx.prop('checked')){
    console.log('isChecked: yes');
  } else {
    console.log('isChecked: no');
  }
}

因此，请确保您的代码没有附加不正确的动态侦听器。如果 .unbind('click') 被添加到第二个动态监听器，那么它将只有 1 个点击动作。

哦，顺便说一句：.is(':checked') 在 jQuery 中不起作用。您必须使用 .prop('checked') 来获取复选框上的真/假条件。

【讨论】：