动态加载的复选框未触发

Question

Table 使用下面的 ajax 加载..

    $.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();
            }
          });


        }


    });

我的事件处理程序是下面的代码。（它甚至不调用复选框检查。）请帮助我。提前致谢。

$(文档).ready(函数(){

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

   });

我也使用了下面的代码。

$(文档).ready(函数(){

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

        alert("hello")                        
      ;          

    });

   });

Answer 1

您的 _newly_added_ 复选框将不会实现“.cbox”行为。 '因为你在 $(document).ready(..) 上通过 jquery 定义了这种行为，并且在添加了这个新复选框之后，它对你的 $(document).ready(..) 事件一无所知，即使它有 .cbox class。为每个新元素手动添加 $('#newElementId').change(function(){..}) 处理程序。

Answer 2

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

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

    success: function(s){

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

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


    }

动态加载的复选框未触发

dynamically loaded checkbox not firing

javascript

ajax

checkbox

jquery

events