jQuery bind() problem?

Question

I have made a generic function to show jQuery dialogs in my app. this function simply

• Set the dialog title
• make an ajax call to a server side function and populate the dialog with the html returned
• open the dialog

Here is the function:

function loadDialog(action, id, title, onCloseHandler) {
    $("#__gsl_DialogPanel").dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function(response) {
            $("#__gsl_DialogPanel").html('').html(response).dialog('open');
        }
    });
    $("#__gsl_DialogPanel").bind("dialogclose", function(event, ui) {
        if (onCloseHandler != null)
            onCloseHandler();
    });
}

As you can see the function actually does even bind a function to the dialogclose event so when the dialog is closed that function get called. This feature is particularly useful if I use a dialog to add/edit/delete elements in a grid: I can pass a function that does a grid update and when the dialog is closed the grid will update itself.

I am experiencing that, in some cases, the function binded to the dialogclose event is called more than once and I am suspecting that the problem is related to the fact that multiple calls to my loadDialog function will bind multiple reference of the same close handler.

Am I correct? Do I have to explicitly unbind everything whn the dialog close?

thanks for helping!

Update:

As per the answers received I have simply unbinded and binded again the function handler and everything works! this is the updated code

$("#__gsl_DialogPanel").unbind("dialogclose").bind("dialogclose", function(event, ui) {
    if (onCloseHandler != null)
        onCloseHandler();
    });
}

Answer 1

In DOM level 2, multiple listeners can be bound to an event on a given element, so it's perfectly possible for multiple calls to loadDialog() to bind multiple listeners to the dialogClose event.

If the element with the ID of __gsl_DialogPanel remains present in the DOM regardless of whether the dialog is displayed, you will definitely end up binding multiple listeners to the dialogClose event with multiple calls to loadDialog().

Answer 2

jQuery has a nice syntax for custom events: 'eventName.pluginName' This way you can bind the same event, but differentiate between the different handlers.

calling trigger('eventName') will trigger all handlers

In your case you can unbind just your event, and leave others alone.

Example:

<input id="btn" type="button" value="Button">

Javascript:

$('#btn'​).​bind('myEvent',function(){
    alert('myEvent.other plugins');
});

$('#btn').bind('myEvent.myPlugin',function(){
    alert('myEvent.myPlugin');
});

//use this in your loadDialog function for the dialogClose event
$('#btn').unbind('myEvent.myPlugin').bind('myEvent.myPlugin',function(){
    alert('myEvent.myPlugin');
});

$('#btn').trigger('myEvent');
​

You can try this live jsFiddle example.