Binding an event after ajax call

Binding an event after ajax call

Hi All,

I'm quite new to jquery...and i find it quite fascinating but at the same time...confusing..so bear with me! :)

I'm using ASP.net mvc (which is irrelevant to this case), and the Telerik MVC Grid, jquery and jquery ui! The page consists of the grid, which has a number of rows with data which is loaded after the page has been loaded. One of the columns on the grid is a 'delete' button and when the user press it, a jquery ui confirmation dialog should show.....unfortunetly it doesn't. I noticed that i could rebind all buttons using livequery, but again it doesn't work.

The funny thing is that i added another button which is not part of the grid, and after reload, the new button works (ie shows dialog), then the rest of the buttons start working!

The code is as follows:

  1. $(function ($) {
  2.  //Destroy dialog - fix
  3.    $("#dialog").dialog("destroy");
  4.     // Setup dialog box
        $('#remove-confirm-dialog').dialog({
            autoOpen: false,
            resizable: false,
            width: 300,
            height: 200,
            modal: true,
            buttons: {
                Yes: function () {
                    $(this).dialog('close');
                },
                No: function () {
                    $(this).dialog('close');
                }
            }
        });


        //Function to bind all a [href] dom to event
        $("a[name^='_remove']").livequery('click', function (event) {
            $("#remove-confirm-dialog").dialog("open");
            return false;
        });





















  5. });
My question is...how can i rebind the event properly after the grid has been databinded/refreshed?

Any ideas would be more than welcome thanks all!

Nick