Rebinding jquery events to return html.

Question

I am using jquery and having a problem with binding to return data from the web server. The data is coming back as HTML.

Here's what happens....

1. User clicks a link and a dialog box opens up. The addToCurrent button is binded to a click event.
2. The user submits the data to the web server and the returnFromAdd() is called on the return data.
3. Try to rebind the addToCurrent button in the new data but it doesn't happen.

The code below is the basics of what I am trying to do. If you have any suggestions let me know.

    function bindAddGroupButtons() {
        $("#addToCurrent").click(function() { alert("here") });
    }

    $(".linkButton").click(function() {
        $.get("someURL", function(data) {
            $('#addGroupModal').html(data);
            $('#addGroupModal').dialog("open");
            bindAddGroupButtons();
        });
    });

    /*** callback function dialog post **/
    function returnFromAdd(data) {
        $('#addGroupModal').html(data);
        bindAddGroupButtons();
    }

Answer 1

I am afraid I can't fully understand what you are trying to do. It seems however that you want to add an event to an item added dynamically to the DOM. You can generally do this using the live plug-in. The newest version of jQuery 1.3 supports live events.

Answer 2

This is what I am trying to do....

1. Create a modal dialog that displays a form to the user.
2. Upon submitting the form validate the data.
3. If data good, return the user back to the parent page of the dialog and update the fields (like a table).
4. If data bad, report error to user in the open modal dialog. Allow them to correct the data and resubmit.

All I get from users on other forums is this is easy. Then they show one line of code but I can't get it to work. I would like to see a working example.