CODEWITHSUNDEEP
javascriptjqueryajaxeventscheckbox
Suresh Babu
Suresh Babu

Reputation: 35

dynamically loaded checkbox not firing

Table loading using 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();
            }
          });


        }


    });

and my event handler is code bellow. ( it is not calling even checkbox checking.) Please help me. Thanks in Advance.

$(document).ready(function(){

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

   });

and I used bellow code also.

$(document).ready(function(){

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

        alert("hello")                        
      ;          

    });

   });

Upvotes: 2

Views: 996

Answers (2)

hugorut
hugorut

Reputation: 151

The problem you are having is that when you define you click/change functions in your javascript you are doing them within a document ready function. That means it will bind these event listeners only on elements that are present on the document load. If you want the change functionality elements appended to the DOM after ajax you will have to bind these event listeners dynamically.

The simplest way would be to rerun you existing code in the once all elements are added to the DOM.

    success: function(s){

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

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


    }

Upvotes: 2

amankkg
amankkg

Reputation: 5061

Your _newly_added_ checkboxes will not implement '.cbox' behavior. 'Cos you're defining such behavior via jquery on $(document).ready(..), and after this new checkbox is added, which doesn't know anything about your $(document).ready(..) events, even it will have .cbox class. Add a $('#newElementId').change(function(){..}) handler manually for every new element.

Upvotes: 0

Related Questions