toggleClass没有按预期工作：函数调用两次

Question

ToggleClass没有给出预期的结果，因为函数正在执行两次。

HTML：

<form method="get" class="custom-controls">
    <label><input name="Gorilla" type="checkbox"/>Gorilla</label><br/>
    <label><input name="Lamb" type="checkbox"/>Lamb</label><br/>
    <label><input name="Tiger" type="checkbox"/>Tiger</label><br/>
    <input type="submit">
</form>    

jQuery的：

$(document).ready(function(){
    $('.custom-controls').find('input').each(function(){
        ($(this).is(':radio')?$input_class_name="custom-radio-wrap":$input_class_name="custom-check-wrap");     
        $(this).parents('label').wrapInner(('<span class="' + $input_class_name + '"></span>'));                    
    });
    $('.custom-controls').delegate("span", "click", function () {
        $(this).toggleClass('checked');     
    });
});

FIDDLE REFERENCE

Answer 1

这是由事件冒泡引起的，只需在其后添加return false。

$('.custom-controls').delegate("span", "click", function () {
    $(this).toggleClass('checked');
    return false; 
});

OR

$('.custom-controls').delegate("span", "click", function (e) {
    $(this).toggleClass('checked');
    e.preventDefault();                                                    
});

Answer 2

尝试使用

$(document).on('click', 'span', function(e){

Answer 3

您的最终代码将跟随：

$(document).ready(function() {
  $('.custom-controls').find('input').each(function() {
    ($(this).is(':radio') ? $input_class_name = "custom-radio-wrap" : $input_class_name = "custom-check-wrap");
    $(this).parents('label').wrapInner(('<span class="' + $input_class_name + '"></span>'));
  });
  $('.custom-controls').delegate("span", "click", function(e) {
    $(this).toggleClass('checked');
    var checked_status = $(this).find("input").prop("checked") ? 0 : 1; //for checked input checkbox..
    $(this).find("input").prop("checked", checked_status);
    e.preventDefault();
  });
});

.custom-label {
  display: inline-block;
  margin-bottom: .8em;
  cursor: pointer;
}
.custom-radio,
.custom-check {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: -.15em;
  margin: 0 .4em;
  width: 22px;
  height: 22px;
}
label {
  display: block;
}
.custom-check-wrap input {
  /* left:-9999px;*/
  position: absolute;
}
.custom-check-wrap {
  background: #CCC;
  padding-left: 30px;
  min-height: 22px;
  display: block;
}
.custom-check-wrap.checked {
  background: green;
}
.custom-check {
  background: url(images/chk-uncheck.png) no-repeat;
}
.custom-check.checked {
  background: url(images/chk-checked.png) no-repeat;
}
.custom-radio {
  background: url(images/radio-uncheck.png) no-repeat;
}
.custom-radio.checked {
  background: url(images/radio-checked.png) no-repeat;
}
.custom-check.focus {
  background: url(images/chk-uncheck.png) no-repeat;
}
.custom-check.checked.focus {
  background: url(images/chk-checked.png) no-repeat;
}
.custom-radio.focus {
  background: url(images/radio-uncheck.png) no-repeat;
}
.custom-radio.checked.focus {
  background: url(images/radio-checked.png) no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="custom-controls">
  <form method="get">
    <label>
      <input name="Gorilla" type="checkbox" />Gorilla</label>
    <br/>
    <label>
      <input name="Lamb" type="checkbox" />Lamb</label>
    <br/>
    <label>
      <input name="Tiger" type="checkbox" />Tiger</label>
    <br/>
    <input type="submit" />
  </form>
</div>