[英]Click event doesn't fire after ajax event
我有一个使用iCheck设置样式的复选框。 这部分工作正常。 我的问题是我想在每次更改时将复选框状态保存在数据库中。 但是我的ajax请求只会在第一次触发。
我有这样的设置:
HTML:
<ul class='tasks'>
<li><input type=checkbox rel='module' data='1' name=done[] class='taskStatus'>Text</li>
</ul>
jQuery的
$("input[type=checkbox]").on("ifClicked", function(){
alert("init");
var stateObj = {
id: $(this).attr("data"),
mode: $(this).attr("rel"),
state: null
};
if($(this).prop("checked") === false){
stateObj.state = 1;
} else {
stateObj.state = 0;
}
updateState(stateObj);
});
function updateState(stateObj){
alert("updating");
$.ajax({
url: "moduleAjax.php?module=" + stateObj.mode + "&page=eventState",
type: "POST",
data: "obj=" + JSON.stringify(stateObj),
success: function(data){
alert(data);
},
error: function(a, b, c){
alert("error");
}
});
}
我试图注释掉ajax请求。 这样做警报框将按预期方式触发。
我有一个解决方法添加window.location.reload(); 警报(数据)之后。 但是我认为这不是必须的。 我也尝试过异步发送请求:false; 模式没有成功。 我没主意了。
题
发送ajax请求时,为什么每次单击都不会触发ifClicked事件?
附加信息
执行脚本时,控制台没有任何错误。 第二次运行均无任何警报。
我什至无法在jsfiddle中重现该问题。
有任何线索吗?
编辑
我刚刚使用新的iCheck beta源代码进行了测试。 然后事件就会按原计划触发,但还会引发其他一些问题。 因此,这似乎源于iCheck的错误。 (但我可能是错的)。
在Ajax响应之后重新初始化事件处理程序怎么样?
$(function () {
initClickedHandler();
});
function initClickedHandler(){
$("input[type=checkbox]").on("ifClicked", function(){
alert("init");
var stateObj = {
id: $(this).attr("data"),
mode: $(this).attr("rel"),
state: null
}
if($(this).prop("checked") === false){
stateObj.state = 1;
}
else{
stateObj.state = 0;
}
updateState(stateObj)
});
}
function updateState(stateObj){
alert("updating");
$.ajax({
url: "moduleAjax.php?module=" + stateObj.mode + "&page=eventState",
type: "POST",
data: "obj=" + JSON.stringify(stateObj),
success: function(data){
alert(data);
initClickedHandler();
},
error: function(a, b, c){
alert("error");
}
});
}
另外,在updateState(stateObj)之后,您缺少分号
通过使用jQuery的.click .click()
方法( jsfiddle ),您可能可以完全避免此问题:
$('input[type="checkbox"]').on('click', function() {
var stateObj = {
id: $(this).attr("data"),
mode: $(this).attr("rel"),
state: null
}
if( $(this).prop('checked') === false ) {
stateObj.state = 1;
} else {
stateObj.state = 0;
}
updateState(stateObj);
});
function updateState(stateObj) {
console.log(stateObj.state);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.