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

这是由事件冒泡引起的，只加它后面是。

$('.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>