Question

I usually would include a lot of code with my questions but I’m not sure exactly what I should include with this!

I have a list of users in a table, I am showing only 10 users at a time using the tablesorter pager (pagination) plugin http://tablesorter.com/docs/example-pager.html

In each row there is a delete button for each user. When you click the delete button a dialog box pops up “do you want to delete this user blah blah…” http://jqueryui.com/demos/dialog/

The problem I am having is that when I go to page 2 of the table pagination (or any other page that is not the first) the jQuery dialog box does not “fire” and you are able to delete the user without the dialog warning.

Does anyone have experience of using these 2 plugins in tandem or is there some sort of function I need to call to “refresh” the UI plugin when I move to a new page via the pagination.

To summarise: the tablesorter/pager works as expected, the jQuery UI dialog box works as expected but the jQuery UI dialog box does not load on when on a page that is not 1 on the pager.

Hope that makes sense and if there is any additional info/code that anyone needs to help me figure this one out please ask and I will add.

EDIT

This is the script to call the dialog.

<script type="text/javascript">
    $('#dialog-confirm').hide();
        $('.delete-recip').bind('click',function(e){
            e.preventDefault();
            var targetUrl = $(this).attr("href");
        $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:140,
                modal: true,
                buttons: {
                    "&{'recipientlist.DeleteUserButton'}": function() {
                        $( this ).dialog( "close" );
                        window.location.href = targetUrl;
                    },
                    &{'recipientlist.DeleteUserCancel'}: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
    });

 });
</script>

Answer 1

Need to delegate the function to a static element….paginated elements are created after the DOM, so they’ll have no events bound to them.

Delegating using jQuery 1.7’s .on() ->

 $(document).on('click', '.delete-recip', function(){ 
   // copy function code here
 });