Question

I added a custom button to my jQuery UI dialog titlebar, as follows:

$('#dialog').html(html);
$('#dialog').dialog({
    modal: true,
    open: function(event, ui) {
        $(".ui-dialog-titlebar").append("<a href=\"#variants\" id=\"variants-button\"><img src=\"admin-images/variants-button.png\" alt=\"Variants\" /></a>");
    }
});

Now I need to add a ‘click’ handler to this button, but I am struggling with this.

$('#variants-button').click(function(){
    $('#information').hide();
    $('#variants').show();
    return false;
});

This doesn’t do anything. I have also tried putting the click handler in a ‘delegate’ but that doesn’t work either. Any ideas?

EDIT: zysoft has provided the correct solution, but I need this to work with multiple dialogs on the page. It does not seem to work as expected with multiple dialogs.

Answer 1

Your button is added in runtime when dialog opens. It seems to happen after you assign click handler. Try this:

$('#variants-button').live('click', function(){
    $('#information').hide();
    $('#variants').show();
    return false;
});