将 jquery 单击功能添加到禁用的按钮？答案

【问题标题】：Adding a jquery click function to a disabled button?将 jquery 单击功能添加到禁用的按钮？
【发布时间】：2013-07-03 00:54:55
【问题描述】：

我该怎么做？

我有一个禁用的 jquery ui 按钮，我想显示一个警报。更改页面上的下拉菜单时，该按钮变为启用状态。

HTML：

<button id="AssignRolesButton" disabled="disabled">Assign Roles</button>

JS：

$(function () {    
    $('#AssignRolesButton').button();

    //doesnt work
    $('#AssignRolesButton').button().click(function (e) { e.preventDefault(); alert('yoyo'); }); 

    $('#ApplicationsDropdownList').change(function () {  
        //enables the button 
        $('#AssignRolesButton').removeAttr('disabled').removeClass('ui-state-disabled');
        //doesnt work
        $('#AssignRolesButton').button().click(function (e) { e.preventDefault(); alert('yoyo'); });
        // also doesnt work
        $('#AssignRolesButton').click(function (e) { e.preventDefault(); alert('yoyo'); });  
   });    
});

总而言之，我需要按钮在禁用时具有 jquery ui 样式，并在启用时注册单击功能。

【问题讨论】：

您希望禁用的元素触发点击事件吗？
@roasted: 禁用的元素不能触发点击事件...
@Bergi ya，这就是为什么我要问并发布解决方法
在您的最后一次点击事件处理程序中缺少});，而e.preventDefault; 应该是e.preventDefault(); - 是那些粘贴错误吗？
@mark yeh 抱歉，那些是在浏览器错误中粘贴和编辑的 - 现在将编辑问题以修复

标签： jquery jquery-ui

【解决方案1】：

//enables the button 
$('#AssignRolesButton').removeAttr('disabled').removeClass('ui-state-disabled');

没有。您将需要使用enable method of your Button-widget (Demo)。否则，jQuery-UI-button 仍然被禁用（即使它看起来不像这样）并且 jQueryUI 拦截点击事件，停止它的传播，这样你的处理程序就不会被调用。你可以清楚地看到这种行为here - 在 jQueryUI 的拦截器之前附加的处理程序仍然被调用。

e.preventDefault;

正如其他人提到的，这是一个方法，需要调用：e.preventDefault();。

【讨论】：

此解决方案的一个问题是，每次您在下拉列表中选择新内容时，都会添加另一个 evernt 处理程序。我通过使用解决了这个问题：$('#AssignRolesButton').one("click", function () { alert('sdsds'); });
这不是我的解决方案的一部分，它在您的原始代码中，我刚刚演示了它现在可以工作:-) 实际上，您应该将点击处理程序附加到 change 处理程序之外。还是您希望每次更改事件只单击一次？
不，我最终将处理程序附加到更改处理程序之外。感谢您的帮助 - 现在它的工作就像一个魅力

【解决方案2】：

使用解决方法，因为禁用的元素不会触发附加事件：

DEMO

$(function () {
    var $assignBtn = $('#AssignRolesButton');
    $('<div id="btn_overlay"/>').css({
        position: 'absolute',
        top: $assignBtn.offset().top,
        left: $assignBtn.offset().left,
        width: $assignBtn.outerWidth(),
        height: $assignBtn.outerHeight(),
        'z-index': 1000,
    }).click(function () {
        $assignBtn.triggerHandler('click');
    }).appendTo('body');

    $('#ApplicationsDropdownList').change(function () {
        $('#btn_overlay').remove();
        $assignBtn.prop('disabled', false);
        //...
    });
    $assignBtn.click(function (e) {
        e.preventDefault();
        alert('yoyo from btn handler');
    });
});

【讨论】：

跟我想的差不多。您选择.triggerHandler而不是.trigger的任何原因？
@MarkSchultheiss 只是为了避免传播，即使在这里也无法改变任何东西
仅供参考，修复 e.preventDefault 调用 - 需要 ()
单击演示中的 JSHint 按钮 :) 发现另一个问题。 - IE 版本中的额外逗号错误。 :(
@MarkSchultheiss 这并不是一个错误，只是 JSHint 不喜欢驼峰式大小写 ;) 但是，等等，我会修复它

【解决方案3】：

然后，当您在下拉列表中选择了某些内容时，只需绑定点击事件。否则，不要动它。

【讨论】：