jQuery更改事件调用两次
jQuery更改事件调用两次
提问于 2018-06-10 07:52:08
我有一个带有切换复选框的表单，问题是当我更改时，我会提交两次表单。
我不知道是什么原因造成的。
这是我的代码：
$('.switchery').change(function(e) {
//var isChecked = $(this).is(":checked");
//console.log('isChecked: ' + $(this).attr('name'));
$.post('http://localhost/centrix/', {"x":"x"}, function(data){
// alert(1)
},"json");
});我的HTML代码：
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" name="yes1" class="switchery" checked="checked">
Overdue
</label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" name="yes2" class="switchery">
Today
</label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" name="yes1" class="switchery" checked="checked">
Tomorrow
</label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" class="switchery" checked="checked">
Open
</label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" class="switchery">
Completed
</label>
</div>回答 4
Stack Overflow用户
发布于 2018-06-10 08:03:06
$('.switchery').click(function(e) {
e.stopImmediatePropagation()
...
您可能有一个带有.switchery类的父元素，或者更改事件被某些东西触发了两次。Chrome检查器中的事件侦听器选项卡可能会有所帮助。
Stack Overflow用户
发布于 2018-06-10 09:16:39
请尝试以下操作
$(document).ready(function(){
$('.switchery').on("click touchend" , function(e) {
var isChecked = $(this).is(":checked");
console.log('isChecked: ' + $(this).attr('name'));
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" name="yes1" class="switchery" checked="checked">
Overdue
</label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" name="yes2" class="switchery">
Today
</label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" name="yes1" class="switchery" checked="checked">
Tomorrow
</label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" class="switchery" checked="checked">
Open
</label>
</div>
<div class="checkbox checkbox-switchery checkbox-right switchery-xs">
<label class="display-block">
<input type="checkbox" class="switchery">
Completed
</label>
</div>
</body>
</html>
Stack Overflow用户
发布于 2019-08-23 22:35:22
" click“事件提供的解决方案不会在您单击链接到您的交换机的标签时触发...
这是我的变通办法:使用一个延迟很小的setTimeout ...
$('.switchery').change(function(e) {
//clear the timeout (for the 2nd call)
clearTimeout($(this).data("timeoutChange"));
//set the timeout, and link it to your switch
$(this).data("timeoutChange", setTimeout(function(){
$.post('http://localhost/centrix/', {"x":"x"}, function(data){
// alert(1)
},"json");
}),100)
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50779479
复制相关文章
相似问题