Need to click twice on jQuery UI button after enabling it

Question

I've got this simple button made using jquery UI with a very simple click functionality:

    $('#bewerkopslaan').button({
        icons: {
            primary: 'ui-icon-disk'
        },
        disabled: true
    }).click(function() {
        alert('test');
            });

At some point I enable the button like this:

    $('#bewerkopslaan').button("option", "disabled", false);

Then I can click the button but... nothing happens. Then I click it again and it works. So I always have to click it twice.

Are you enabling the button in a click handler on the button? Mind posting a jsfiddle.net or jsbin.com demo? — Matt Ball
– Matt Ball, Commented Mar 11, 2011 at 16:32
I'm using chromium. Strange enough, the code works great in Firefox. (albeit a little slower ;)) — Jelle De Loecker
– Jelle De Loecker, Commented Mar 11, 2011 at 17:10

Zakaria · Accepted Answer · 2011-03-11 16:35:39Z

2

I wrote exactly what you mentioned but, the code works great. Look here.

answered Mar 11, 2011 at 16:35

Zakaria

15.1k22 gold badges86 silver badges126 bronze badges

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

Comments

Jeremy Battle · Accepted Answer · 2011-03-11 16:43:15Z

1

The code you provided will enable the button correctly from my testing, however, the button having a disabled state does not disable the click event you've added. If you want the button to be truly disabled you need to bind the event only when you enable the button and unbind the click when you disable the button.

example can be found here: http://jsfiddle.net/WmAQJ/1/

<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

  <script type='text/javascript'>
  $('#bewerkopslaan').button({
    icons: {
        primary: 'ui-icon-disk'
    },
    disabled: true
  });

  $('#enabler').click(function() {
      $('#bewerkopslaan').button("option", "disabled", false).bind("click", function() {
        alert('test');
      })
  });

  $('#disabler').click(function() {
      $('#bewerkopslaan').button("option", "disabled", true).unbind("click")
  });
  </script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" /> 
  <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 
</head>
<body>
  <div id="enabler">click me to enable button</div>
  <span id="bewerkopslaan">button</span>
  <div id="disabler">click me to disable button</div>  
</body>
</html>

answered Mar 11, 2011 at 16:43

Jeremy Battle

1,63813 silver badges18 bronze badges

2 Comments

Jelle De Loecker Over a year ago

The click event wasn't triggered when the button was disabled. However, I still implemented your method. It works in Firefox, but not in Chromium.

Jeremy Battle Over a year ago

What version are you running? This works fine for me in Chrome 10.0.648.133 Have you customized your Chromium at all before building it?

Collectives™ on Stack Overflow

Need to click twice on jQuery UI button after enabling it

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related