Question

我使用以下代码

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

单击cc1按钮后执行功能。使用此代码，一切都很好。

当我使用以下代码时

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

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

    }

    //somefunction
});

为了执行与上面相同的功能，但是当选中cc复选框并单击按钮付费时，该函数执行多次，我在db读取时收到错误...

有什么问题？

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

Answer 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>

Answer 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'）被添加到第二个动态侦听器，那么它将只有一次单击操作。

哦，顺便说一下：.is（'：checked'）在jQuery中不起作用。您必须使用.prop（'checked'）来获取复选框上的true / false条件。

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

2 个答案: