点击

Question

我有一个像这样的div

$('.btn-group label').unbind().click(function() {
  $(this).toggleClass('active');
  var checked = $(this).find('input').prop('checked');
  console.log(checked);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
  <label class="btn btn-primary">
	    <input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
	  </label>
  <label class="btn btn-primary">
	    <input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
	  </label>
  <label class="btn btn-primary">
	    <input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective 
	  </label>
  <label class="btn btn-primary">
	    <input type="checkbox" autocomplete="off" class="invert"> Invert 
	  </label>
  <label class="btn btn-primary">
	    <input type="checkbox" autocomplete="off" class="select-color"> Select Colors 
	  </label>
</div>

有一个错误，当我检查控制台结果的点击时，我从这个jquery函数得到两个结果false和true

如何只记录有效的？

在jsfiddle上它没有双重记录https://jsfiddle.net/8wtLc8b6/

Answer 1

使用change事件代替click

＆＃13;

＆＃13;

$('.btn-group label').change(function(e) {
  $(this).toggleClass('active');
  var checked = $(this).find('input').prop('checked');
  console.log(checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective 
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="invert"> Invert 
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="select-color"> Select Colors 
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

<强>为什么吗

在输入

中附加更改后更改事件运行

＆＃13;

＆＃13;

$('.btn-group label').change(function(){
console.log('change') //its run only on completely changed
}).click(function(e) {
  console.log('click'); //its run before and after changing
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective 
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="invert"> Invert 
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" class="select-color"> Select Colors 
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;