通过 jquery 管理按钮单击的最佳方法答案

【问题标题】：Best way to manage button click via jquery通过 jquery 管理按钮单击的最佳方法
【发布时间】：2011-12-22 17:31:38
【问题描述】：

在我的 jquery web 应用程序中，我需要管理几种按钮。所有按钮都有 ui-button css'class，以及特定按钮操作的特定 css 类，例如

<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 处理程序来管理按钮的操作。例如，

如果用户在没有其他 css 类的情况下点击 div.ui-button，浏览器会转到 www.google.it
如果用户点击 div.ui-button.ui-search，浏览器会打开一个文本输入对话框
如果用户点击 div.ui-button.ui-submit，浏览器提交按钮的父表单
如果用户点击 div.ui-button.ui-actionX，浏览器会执行 actionX。

那么，你能告诉我如何在不冲突的情况下将事件附加到按钮上吗？

谢谢。

【问题讨论】：

标签： jquery events button click

【解决方案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() 放入此代码才能正常工作，这使其成为一个糟糕的解决方案。 =/

【讨论】：

@Jared 对不起，这是真的。在我的解决方案中需要使用 unbind('click')
Unbind 并不能解决问题……所有按钮都响应选择器“div.ui-button”，因此将首先运行 google 功能。但我喜欢这种方法:)

【解决方案2】：

您可以通过 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 });

【讨论】：

【解决方案3】：

最好是添加ui-button-google，然后你可以干净地单独绑定到所有按钮。

jQuery 1.7 引入了开/关功能，因此您只需针对每一个：

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

如果您不将类添加到 Google 按钮，您也可以绑定到常规 UI 按钮并检查按钮上存在的类。

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

【讨论】：

【解决方案4】：

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

【讨论】：