0

これどうやってするの？

アラートを表示したい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 スタイルを無効にし、有効にしたときにクリック機能を登録するには、ボタンが必要です。

4

3 に答える 3

1

無効な要素は添付イベントを発生させないため、回避策を使用してください。

デモ

$(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');
    });
});
于 2013-07-02T13:32:02.830 に答える
1 
//enables the button 
$('#AssignRolesButton').removeAttr('disabled').removeClass('ui-state-disabled');

enableいいえ。ボタンウィジェット( Demo )のメソッドを使用する必要があります。それ以外の場合、jQuery-UI-button は (たとえそうでなくても) 無効のままであり、jQueryUI はクリック イベントをインターセプトし、その伝達を停止して、ハンドラーが呼び出されないようにします。ここでこの動作を明確に確認できます。jQueryUI のインターセプターの前にアタッチされたハンドラーがまだ呼び出されています。

e.preventDefault;

他の人が述べたように、これはメソッド であり、呼び出す必要があります: e.preventDefault();.

于 2013-07-02T13:45:00.573 に答える