Question

使用ajax bellow表加载..

    $.ajax({

        type:"POST",
        url:"loadquestionsajax.php",
        data:"qcategory="+qcategory,
        dataType:"json",
        success: function(s){


           $.each(s,function(i,obj)
            {
                if(obj!=false){

           while(i<1){
              $("#t01").append("<tr>"+"<th><input type='checkbox' class='cbox' value=''/></th>"+"<th>Question ID</th>"+"<th>Question</th>"+"<th>Choice 1</th>"+"<th>Choice 2</th>"+"<th>Choice 3</th>"+"<th>Choice 4</th>"+"<th>Answer</th>"+"</tr>");

           i++;
           }



            $("#t01").append("<tr>"+"<td><input type='checkbox' name='qtns[]' class='cbox' value='"+obj[0]+"'/></td>"+"<td>"+obj[0]+"</td>"+"<td>"+obj[1]+"</td>"+"<td>"+obj[2]+"</td>"+"<td>"+obj[3]+"</td>"+"<td>"+obj[4]+"</td>"+"<td>"+obj[5]+"</td>"+"<td>"+obj[6]+"</td>"+"</tr>");


            }else{
                exit();
            }
          });


        }


    });

我的事件处理程序是下面的代码。（它甚至没有调用复选框检查。）请帮助我。在此先感谢。

（文档）$。就绪（函数（）{

    $(document).on('click', '.cbox', function(){
         alert('test');
    });

   });

我也使用了下面的代码。

（文档）$。就绪（函数（）{

    $('.cbox').change(function(){   // .click also seen  but not workig.

        alert("hello")                        
      ;          

    });

   });

Answer 1

您遇到的问题是，当您在javascript中定义单击/更改功能时，您正在文档就绪功能中执行这些功能。这意味着它将仅对文档加载中存在的元素绑定这些事件侦听器。如果您希望在ajax之后将更改功能元素附加到DOM，则必须动态绑定这些事件侦听器。

最简单的方法是在将所有元素添加到DOM后重新运行现有代码。

    success: function(s){

      //...
      // elements created
      //...

     //now reload the event listener
        $(document).on('click', '.cbox', function(){
            alert('test');
        });


    }

Answer 2

您的_newly_added_复选框无法实现＆＃39; .cbox＆＃39;行为。＆＃39;您是否通过$(document).ready(..)上的jquery定义了此类行为，并在添加了这个新的复选框后，该复选框对您的$(document).ready(..)事件一无所知，即使它会有.cbox课程。为每个新元素手动添加$('#newElementId').change(function(){..})处理程序。

动态加载复选框不激活

2 个答案: