jQuery UI dialog - add handler for custom button

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.

zysoft · Accepted Answer · 2012-01-20 12:16:03Z

2

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;
});

answered Jan 20, 2012 at 12:16

zysoft

2,3681 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MAX POWER Over a year ago

Cheers, that has worked. I was considering using 'live' but then I read somewhere that it should not be used any more?

David Hoerster Over a year ago

live has been deprecated. Use delegate for pre-1.7 jQuery and on for 1.7+ jQuery.

MAX POWER Over a year ago

Cheers David, can you check my edit in the original post. Thanks.

zysoft Over a year ago

Change item id to a class and then update selector to look like this: $('.dialog-button').on('click', function() { ....}); Then it will react on all buttons that have dialog-button class

David Hoerster · Accepted Answer · 2012-01-20 12:44:06Z

Why don't you just create the click handler after you append the new button?

$('#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>");
        $('#variants-button').click(function(){
            $('#information').hide();
            $('#variants').show();
            return false;
        });
    }
});

If you add the event handler after you add the element to the DOM, you should be OK.

UPDATE Based on your update, if you wanted to do something like this to multiple dialog title buttons, a delegate may be better (since you'll avoid having to do this for every dialog).

You could apply a class to your button (e.g. variant-class) that acts as a marker class that you'll use as a selector to your on handler:

$('.variant-class').on('click', function() {
  $('#information').hide();
  $('#variants').show();
  return false;
});

I hope this helps. Good luck!

Simon Edström · Accepted Answer · 2012-01-20 12:15:13Z

0

Do you execute after you append the the HTML? If not, try using jQuery live insteed.

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

answered Jan 20, 2012 at 12:15

Simon Edström

6,6178 gold badges34 silver badges52 bronze badges

1 Comment

David Hoerster Over a year ago

live has been deprecated. Use delegate for pre-1.7 jQuery and on for 1.7+ jQuery.

Collectives™ on Stack Overflow

jQuery UI dialog - add handler for custom button

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related