Question

I have a input field. When the onchange event is triggered, I want to enable a jQuery button based on a LI element. I want to have the same behaviour as a normal button would do. The problem is, if I click on button when it’s disabled, jQuery catches the event and prevents the default behaviour to occurs, which should release the focus on the input field and trigger the onchange event before the onclick is triggered on the button.

I’m using jQuery 1.6.4 with jQuery UI 1.8.16 in Chrome.

In this live demo : http://jsfiddle.net/francisfortier/QMDc2/5/, you have three fieldsets. The first one uses a standard button, the second one, a jQuery button based on a li and the third one, use again a jQuery button based on a li with a special hack to manually release the focus from the input field on the click capture. This third fieldset can solve my problem on modern browsers, but it will not in IE8 because it requires to use event capturing.

Do you have a better cross browser solution to have the same behaviour with a jQuery button as a standard button?

Thank you

Answer 1

What about adding .unbind('click') before your click handler:

$('#jQueryButton').find('li').button({
    disabled: true
}).unbind('click').click(function() {
    alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
});

Demo: http://jsfiddle.net/jtbowden/yPHKp/

Of course, then you have to add the smarts to the click handler to not execute when the input is empty:

$('#jQueryButton').find('li').button({
    disabled: true
}).unbind('click').click(function() {
    if($('#jQueryButton').children('input').val()) {
        alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
    }
});

Demo: http://jsfiddle.net/jtbowden/yPHKp/1/

Or, you could add a keyup handler. Then the change is made before the button is clicked:

$('#jQueryButton').children('input').bind('change keyup', function() {
    var self = $(this);

    self.closest('fieldset').find('.ui-button').button(self.val() ? 'enable' : 'disable');
});

Demo: http://jsfiddle.net/jtbowden/GcnYz/1/

A better solution might be to unbind the click.button handler and then rebind it with the addition of a .blur() event to the input fields:

$('#jQueryButton').find('li').button({
    disabled: true
}).unbind('click.button').bind('click.button', function(event) {
    $('#jQueryButton').children('input').blur();
    if ($(this).button("option", "disabled")) {
        event.preventDefault();
        event.stopImmediatePropagation();
    }
}).click(function() {
    alert('Hello ' + $(this).closest('fieldset').children('input:first').val() + ' !');
});

This retains all of your validation in place, plus forces the change event to happen before the button click. You could integrate the final .click() handler into the click.button event by putting the guts in an else block.

Demo: http://jsfiddle.net/jtbowden/GcnYz/2/