通過jquery管理按鈕點擊的最佳方式

在我的jquery web應用程序中，我需要管理幾種按鈕。所有按鈕都UI按鈕css'class，併爲spefic按鈕的動作特定CSS類，例如通過jquery管理按鈕點擊的最佳方式

<div class="ui-button"> 
    Google 
</div> 
<div class="ui-button ui-button-search"> 
    Search 
</div> 
<div class="ui-button ui-button-submit"> 
    Submit 
</div> 
<div class="ui-button ui-button-action1"> 
    Action1 
</div> 
<div class="ui-button ui-button-action2"> 
    Action2 
</div>

所以，我需要附加jQuery的處理程序來管理按鈕的動作。例如，

如果用戶點擊div.ui按鈕沒有其他的CSS類，瀏覽器去www.google.it
如果用戶點擊div.ui-button.ui搜索，瀏覽器打開文本輸入對話框
如果用戶點擊div.ui-button.ui-submit，瀏覽器提交按鈕的父窗體
如果用戶點擊div.ui-button.ui-actionX，瀏覽器執行actionX。

因此，你可以給我一個關於如何將事件附加到按鈕而沒有衝突的想法嗎？

謝謝。

來源

2011-11-05 Premier

最好的方法是添加ui-button-google，然後你可以乾淨地綁定到所有按鈕。

的jQuery 1.7引入了開啓/關閉，所有您需要做的是目標每一個：

$('.TARGET-CLASS').on('click', function() {})

如果不將類添加到谷歌按鈕，則可以選擇綁定到一般用戶界面按鈕，並檢查按鈕上出現的類。

$('.ui-button').on('click', function(){ 
    if $(this).hasClass('ui-button-search'){ 
    //search 
    } 
    else if $(this).hasClass('ui-button-submit') { 
    //submit 
    } 
... 
    else { 
    //google 
    });

來源

2011-11-05 17:06:12 Jared

-1

我會嘗試這樣的事：

$('div.ui-button') 
    .click(function() { 
     // google it 
    }) 
    .filter('.ui-button-search') 
    .unbind('click') 
    .click(function() { 
     // open dialog for text input 
    }) 
    .end() 
    .filter('.ui-button-submit') 
    .unbind('click') 
    .click(function() { 
     // submit 
    }) 
    .end() 
    .filter('.ui-button-action1') 
    .unbind('click') 
    .click(function() { 
     // action1 
    });

編輯：

需要把.unbind()這個代碼工作，使其成爲一個壞的解決方案。 =/

來源

2011-11-05 17:02:33 Tulio

這會不會衝突，默認情況下所有的按鈕，以谷歌？ – Jared

@Jared對不起，這是真的。在我的解決方案中，需要使用解除綁定（'點擊'） – Tulio

解除綁定不會解決問題，儘管...所有按鈕都響應選擇器'div.ui-button'，因此將首先運行谷歌功能。但我喜歡這個方法:) – Jared

您可以通過CSS類附加點擊處理程序。你需要在第一個案例中添加一個類（去google.it），或者額外的代碼來檢查它是繼續前的唯一類。

$('.ui-button-search').click(function() { open your dialog for text input here }); 
$('.ui-button-submit').click(function() { submit the parent form (you can get it with this.parents('form') }); 
$('.ui-button-action1').click(function() { perform action #1 });

來源

2011-11-05 17:04:22 Todd

$('div.ui-button').click(function() { 
    var classAr = $(this).attr('class').match(/\sui-\w+-\w+\s*/gi); 
    var uiClass = classAr[0].replace(/\s*/g,''); 
    switch (uiClass) { 
     case 'ui-button-search': 
     //some instructions 
    break; 
     case 'ui-button-submit': 
     //some instructions 
    break; 
default: 
    //some instructions 
     break; 
    } 
});

來源

2011-11-05 17:14:50 user907860

通過jquery管理按鈕點擊的最佳方式

回答

相關問題