Need to click twice on jQuery UI button after enabling it

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.

-------------Problems Reply------------

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

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>

Category:javascript Views:1 Time:2011-03-11

Related post

  • Make a JQuery disabled button enabled with proper styles 2011-05-10

    I have a JQuery Button, disabled by default and I need to enable it on certain event. My problem is that when I just simply remove the attribute 'disabled' the button maintains the disabled jquery css styles. I removed them by hand: $('[id$=btnDowloa

  • How to highlight a table cell (TD) when radio button is clicked with JavaScript/JQuery? 2009-12-29

    I'm developing an online baseball/softball scorebook application. I want to visually change the CSS of the specific table cell (a specific TD) when the user changes the value of one of the radio buttons inside that TD is selected. Here is a JPG of wh

  • jQuery click / change function on radio button set 2010-08-09

    I have a radio button set called "pick_up_point". There are 3 options and clicking on an option will display a set of input fields relevant to the option. Now by default when the user clicks on an option I run the change() function which will run a f

  • How can I simulate a click on a jQuery UI radio button? 2010-08-29

    I have some radio buttons <div id="typeRadios"> <input id="character_chartype_a" name="character[chartype]" type="radio" value="A" /><label for="character_chartype_a">A</label> <input id="character_chartype_a" name="charact

  • Bind jQuery click event only to certain buttons 2011-01-29

    I have a website which create various inputs dynamically. I have 3 specific inputs which I would like to call a JQuery function when clicked. <input type="button" name="Finish" value="Finish"> <input type="button" name="Update" value="Update

  • IE7 container madness on jQuery UI button click 2011-02-25

    Clicking jQuery UI buttons on a page using IE7 makes the container jump. Under the 'Order the #product name#' slideDown on the left, clicking the Quantity Required buttons makes the container move up a few pixels. I can live with this but would like

  • click on one of the buttons in a jQuery UI dialog 2011-05-11

    A question about jQuery UI dialogs. I'm creating an auto-login feature and I want to give some visual feedback. Login is done with jQuery UI dialogs. Question: how do I force a click on the submit-button? In the samples on the site the form hasn't go

  • Fire asp.net (link button or Button) click event using Jquery 2011-05-31

    I need to fire asp.net (link button or Button) click event(server side code) using Jquery, the buttons are in an update panel. Kindly help. --------------Solutions------------- How about: __doPostBack("<%= lnkMyButton.UniqueID %>", ""); Michael

  • jQuery dialog button how to set the click event? 2011-08-05

    Ok i got this code: $(document).ready( function() { $(".dialogDiv").dialog({ autoOpen: false, modal: true, position: [50, 50], buttons: { "Print page": function() { alert("Print"); }, "Cancel": function() { $(this).dialog("close"); } } } ); $('.ui-di

  • Problem with button click event in jquery 2011-09-02

    I am using jQuery on button click to show div but don't know why its not working... HTML: <input type="button" id="addmoresg" value="Add More" name="button"> <div id="addsg" style="display:none"> <!-- more HTML here --> </div>

  • jquery ui buttons: how can I add a clicked state look to a button that's not a checkbox or radio button? 2011-09-03

    I have a jquery ui button that gets instantiated on a div element. I want to achieve the look that a button gets when it's a check box and it's checked. How can I do this is my situation. I've tried: $('#my-div-button').attr('checked', true); $('#my-

  • Running jQuery ajax function when user clicks the back or forward buttons 2011-11-10

    I have the following example where when a user clicks a navigation line it loads in some content using AJAX and also updates the url and title using the jquery history.js https://github.com/browserstate/History.js/ plugin to do some HTML5 History. aj

  • Click event of asp image-button inside gridview using jquery 2012-01-24

    i have a grid-view, which contains an asp image-button for deleting row, i want to get the click event of that image-button using jquery, i want to animate the row before that row is deleted from database, i dont know what could be the best code for

  • Show/Hide Certain Div with JQuery on Button Click 2012-03-25

    I am trying to hide/show/toggle a div when a button is clicked. I am using ASP.NET and everything is inside an ASP:Datalist. I can show or hide the div correctly. However it opens all the divs instead of just the one where the button was selected. Th

  • jQuery: Triggering a click event on a radio button on page load 2012-03-29

    I have 3 radio buttons which hide/show some div's. The radio buttons are getting generated by a php script, I want jquery to check the first radio button (works already!) and then trigger the click function so it hides/shows the related stuff. $("inp

  • jquery ui button crashes on click in IE8(only) 2012-04-10

    i am using jquery ui button with following HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq

  • Removing row that button is clicked on using jquery 2012-04-25

    I have a table with rows in it. When I click a button it is removes the row prior to it. I am using the closest() function to determine the row. I would like to delete the same row that the button is in. function DeletClick(id, date) { var e = window

  • last button of dynamic list not always firing click event with jQuery 2013-06-24

    I have a simple div that I dynamically append buttons to, now all the the button click events fire except for the last element in the list, which sometimes it does fire sometimes it doesn't. If I click on the left or right icon in the button it works

  • jQuery Dynamic Button Click Handler 2010-06-09

    I have a code the change the html of a div to make a button. When I make a click handler for the dynamic button, nothing happens $('#signinup').html("<button id=\"login_submit\">Sign In</button>"); And the handler: $('#login_submit').clic

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.114 (s). 11 q(s)