选中复选框后函数执行两次

function executed twice after checkbox checked

本文关键字：两次 执行 复选框 函数      更新时间：2023-09-26

我使用以下代码

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

为了在单击CC1按钮后执行功能。有了这段代码，一切正常。

当我使用以下代码时

$("#cc1").unbind('click').click(function(e) {
    if($('#cc').is(':checked')){
    }
    //somefunction
});

为了执行与上述相同的功能，但是当选中 cc 复选框并单击按钮 pay 时，该功能被多次执行，我在数据库读取中收到错误......

问题出在哪里？

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

根据您的描述，可能以下代码可以帮助您：

<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 次点击，因为第二个侦听器没有解绑。这些点击堆叠在一起。

.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'） 来获取复选框上的真/假条件。

相关文章：