Question

我的网页上有一些复选框，我正在实施ajax调用，我正在更新div中的内容并刷新复选框中所列项目的数量，例如电子商务网站过滤器侧面。但是在首次检查后复选框第一次time.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 call

$(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.

然后我把第一个查询的值放在一个array.second查询中给我们计数，这样我就可以显示每个动态的计数器

然后使用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调用，实际上页面上没有任何反应。它保持静态。如果有任何疑问，请检查一下并帮我解决这个问题提前致谢

Answer 1

使用.on（）方法

将更改侦听器应用于文档

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

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

希望这有帮助！

Answer 2

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

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

ajax调用php后复选框无效

2 个答案: