我在我的网页上有一些复选框,我正在实现ajax调用,我正在更新div中的内容,我正在刷新复选框中列出的项目的计数,就像电子商务网站过滤器一样。但在第一次勾选复选框之后。Ajax调用工作。但是当我再次打勾的时候。未执行Ajax请求。
请检查以下代码
<input type="checkbox" name="item1" id="item1" value="item1">item1[5]<br />
<input type="checkbox" name="item1" id="item2" value="item2">item1[3]<br />
<input type="checkbox" name="item1" id="item3" value="item3">item1[6]<br />
<input type="checkbox" name="item1" id="item4" value="item4">item1[3]<br />
ajax调用$(document).ready(function(){
checkboxValidate = function (e) {
if(e)e.preventDefault();
$.ajax({
type: 'get',
async:false,
cache:false,
url: 'getmoredata.php',
data: {data1:data1},
success: function(data){
$(data).appendTo('.container');
console.log(data);
},
error: function(data){
alert("ajax error occured…"+data);
},
timeout:5000
}).done(function(){
//alert(timeout);
$("#loading").fadeOut("slow");
$(window).bind("scroll",function(){
scrollMore();
});
});
}
}
<div id="container">
<div id="div1">
</div>
</div>
$( "[type=checkbox]" ).change(checkboxValidate);
ajax调用正在刷新的内容后
我正在getmoredata.php中执行SQL查询,我正在获得刷新的复选框值和它们的计数。
$sql=select DISTINCT colname from tablename where colname='value coming from ajax call' group by colname
$sql=select count(colname) from tablename where colname='value from ajax call' group by colname.
然后我将第一个查询的值放入数组中。第二个查询给了我们count所以我在每个复选框中显示的count是动态的
then with foreach循环我正在刷新上面列出的复选框内容
<?php
foreach($arrayquery as $array)
{
?>
<input type="checkbox" value="<?php echo $array['colname'] ?>"><?php echo $array['colname']
}
?>
恐怕我没有在上面的复选框行添加复选框,是因为我的复选框没有被选中吗?请看一下……ajax调用后,无论我得到什么数据都会添加到容器div中,复选框内容也会在ajax调用后刷新。例如,前两个复选框项的初始计数为5和3,可以更改为10或12或其他东西,这取决于ajax调用后我们获得的数据。
现在的问题是,当我做了我的第一个ajax调用,并刷新div,之后,当我选中任何复选框,ajax调用不做,事实上没有发生在页面上。它保持静止不变。请检查这一点并帮助我。如有疑问,请澄清提前感谢
使用.on()方法将更改侦听器应用于文档
$(document).on('change', 'input[type="checkbox"]', checkboxValidate);
http://api.jquery.com/on/希望这对你有帮助!
当前事件侦听器$( "[type=checkbox]" ).change
仅绑定到页面加载时dom中存在的复选框。相反,使用.on()
函数绑定到动态dom元素
$(document).on("change", ":checkbox", function(){
//your ajax
}