使用jquery和动态内容处理事件

Question

I have a table with a check box which allows to edit the columns in the chosen row. Whenever I click the check box, a dialog pop's out, as it should be. The problem begins when I dynamically change the page content with Ajax (When I change the page of the table). Whenever I click on the 'next' button (to get the next rows of the table), the content changes dynamically and the dialog doesn't pop out when I click on the edit check box. I tried various ways to handle the change but it seems to me that I can't get it right.

Here is the Next button code:

    $('#Next').click(function(){
        if(Number($('#Next').attr('n'))+1 >= Number($('#Next').attr('tn'))){
            $('#Next').removeAttr('class');
            $('#Next').attr('class','next disabled');
        }
        var tmp = Number($('#Next').attr('n'));
        $('#Next').removeAttr('n');
        $('#Next').attr('n',(tmp+1).toString());
        $.get("receive.php",{Page: $('#Next').attr('n')}).done(function(data){
            $('tbody').html(data);
            $('#Previous').removeAttr('class');
            $('#Previous').attr('class','previous');
            $.PutRating();
        });

    });

The data I receive from the php function is the new table content, but then, I can't use the edit check box. Here is the code for it:

    $('input.cb').on('change',function(){
        $('input.cb').not(this).prop('checked',false);
        BootstrapDialog.show({
            title: 'Choose Option',
            message: 'Select an option for: <strong>'+$(this).attr('n')+'</strong>. Be careful!',
            draggable: true,
            type: 'type-warning',
            data:{
                'name': $(this).attr('n')
            },
            buttons: [{
                label: 'Edit',
                icon: 'glyphicon glyphicon-pencil',
                cssClass: 'btn-warning',
                action: function(dialogItself){
                    dialogItself.close();
                    $('#ShowForm').trigger('click');
                    $('#ShowForm').hide();
                    $('#Add').text('Save');
                    $('#Add').attr('class','btn btn-success pull-right');
                    $('#Close').show();
                    $.post('receive.php',{GetRow: 'true',Name: dialogItself.getData('name')}).done(function(data){
                        var values = data.split(':');
                        $('#Type').val(values[0]);
                        $('#Name').val(values[1]);
                        $('#Hobby').val(values[2]);
                        $('#Favorite_color').val(values[3]);
                        $('#Favorite_food').val(values[4]);
                        $('#Notes').val(values[5]);
                    });
                }
            }, {
                icon: 'glyphicon glyphicon-trash',
                label: 'Delete',
                cssClass: 'btn-danger',
                action: function(){

                }
            }]
        });
    });

input.cb is the check box input. I tried the .on function, but It didn't work, I guess I didn't understand it.

Answer 1

Yes that's happening because the elements get added dynamically . You have to do Event delegation
If all your dynamic content is added inside a static container div say it has id #container maybe like this

 <div id="container">  
    // all your dynamic content gets added inside here 
 </div>

then you must use this syntax -- >

  $('#container').on('change','input.cb',function(){ 
   // your code 
  });

The parent div comes first and then the event and then the element you want to listen for . Normal language translation would be "Listen for a change event for input.cb inside #container "
By using this it will get triggered even if that element you are listening for is added dynamically because we did event delegation here and referred to a static parent div in our case its #container(Always try to refer the the closest static parent which would wrap the whole dynamic portion just for performance sake)

You can replace the trigger event like click , change accordingly ..

Note : Make sure that the container div is not dynamically coming from ajax it must be static .