ajax调用php后复选框不起作用

Question

我的网页中有一些复选框，我在这些复选框上实现了 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.

然后我将第一个查询中的值放入一个数组中。第二个查询给我们计数，以便计数显示在每个动态复选框中

然后使用 foreach 循环 我正在刷新上面列出的复选框内容d

<?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 调用，实际上页面上没有任何反应。它保持不变。 请检查这一点并帮助我解决这个问题。如有任何疑问，请澄清 提前致谢

Answer 1

使用 .on() 方法将您的更改侦听器应用于文档

$(document).on('change', 'input[type="checkbox"]', checkboxValidate);

http://api.jquery.com/on/

希望这会有所帮助！

Answer 2

您当前的事件侦听器$( "[type=checkbox]" ).change 仅绑定到页面加载时 dom 中存在的复选框。而是使用 .on() 函数绑定到动态 dom 元素

$(document).on("change", ":checkbox", function(){
    //your ajax
}