li上的jQuery按钮在单击之前不会触发输入的更改事件

Question

我有一个输入字段。当 onchange 事件被触发时，我想启用一个基于 LI 元素的 jQuery 按钮。我希望具有与普通按钮相同的行为。问题是，如果我在按钮被禁用时单击它，jQuery 会捕获该事件并阻止发生默认行为，这应该释放输入字段上的焦点并在按钮上触发 onclick 之前触发 onchange 事件。

我在 Chrome 中使用 jQuery 1.6.4 和 jQuery UI 1.8.16。

在这个现场演示中：http://jsfiddle.net/francisfortier/QMDc2/5/，您拥有三个字段集。第一个使用标准按钮，第二个，基于 li 的 jQuery 按钮，第三个，再次使用基于 li 的 jQuery 按钮，使用特殊的 hack 手动释放点击捕获输入字段的焦点.这第三个字段集可以解决我在现代浏览器上的问题，但它不会在 IE8 中，因为它需要使用事件捕获。

您是否有更好的跨浏览器解决方案以使 jQuery 按钮具有与标准按钮相同的行为？

谢谢

Answer 1

在您的点击处理程序之前添加.unbind('click') 怎么样：

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

演示：http://jsfiddle.net/jtbowden/yPHKp/

当然，那么你必须将智能添加到点击处理程序中以在输入为空时不执行：

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

演示：http://jsfiddle.net/jtbowden/yPHKp/1/

或者，您可以添加一个keyup 处理程序。然后在单击按钮之前进行更改：

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

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

演示：http://jsfiddle.net/jtbowden/GcnYz/1/

更好的解决方案可能是unbind click.button 处理程序，然后通过在输入字段中添加.blur() 事件重新绑定它：

$('#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() + ' !');
});

这将保留您的所有验证，并强制change 事件在按钮单击之前发生。您可以将最终的 .click() 处理程序集成到 click.button 事件中，方法是将胆量放在 else 块中。

演示：http://jsfiddle.net/jtbowden/GcnYz/2/