[英]Click event doesn't fire after ajax event
I have a checkbox styled using iCheck. 我有一个使用iCheck设置样式的复选框。 This parts works fine. 这部分工作正常。 My problem is that i want to save the checkbox state in my database on every change. 我的问题是我想在每次更改时将复选框状态保存在数据库中。 But my ajax request does only fire the first time. 但是我的ajax请求只会在第一次触发。
I have a setup like this: 我有这样的设置:
HTML: HTML:
<ul class='tasks'>
<li><input type=checkbox rel='module' data='1' name=done[] class='taskStatus'>Text</li>
</ul>
jQuery 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");
}
});
}
I've tried to comment out the ajax request. 我试图注释掉ajax请求。 Doing so the alert boxes is firing as they should. 这样做警报框将按预期方式触发。
I have a workaround adding window.location.reload(); 我有一个解决方法添加window.location.reload(); after alert(data). 警报(数据)之后。 But in my opinion this shouldn't be necessary. 但是我认为这不是必须的。 I've also tried sending the request in async: false; 我也尝试过异步发送请求:false; mode with no success. 模式没有成功。 I'm out of ideas. 我没主意了。
Question 题
Why isn't the ifClicked event fired on every click, only the first, when the ajax request is sent? 发送ajax请求时,为什么每次单击都不会触发ifClicked事件?
Additional info 附加信息
I get no errors in the console when executing the script. 执行脚本时,控制台没有任何错误。 Neither any alerts the second run. 第二次运行均无任何警报。
I haven't even been able to reproduce the problem in jsfiddle. 我什至无法在jsfiddle中重现该问题。
Anyone with any clue? 有任何线索吗?
Edit 编辑
I just tested with the new iCheck beta source code. 我刚刚使用新的iCheck beta源代码进行了测试。 then the events get fired as they should, But a few other problems where raised. 然后事件就会按原计划触发,但还会引发其他一些问题。 So this seems to be deriving from a bug i iCheck. 因此,这似乎源于iCheck的错误。 (But i could be wrong). (但我可能是错的)。
How about re-initializing your event handler after the Ajax response? 在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");
}
});
}
Also, you're missing a semi-colon after updateState(stateObj) 另外,在updateState(stateObj)之后,您缺少分号
You might be able to avoid this issue altogether by using jQuery's .click()
method ( jsfiddle ): 通过使用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.