Question

在我的jquery web应用程序中，我需要管理几种按钮。所有按钮都有ui-button css＆＃39;类，以及特定的css类用于spefic按钮的动作，例如

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

那么，您能否告诉我如何将事件附加到按钮而不会发生冲突？

谢谢。

Answer 1

最好的方法是添加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
  });

Answer 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 });

Answer 3

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

Answer 4

我会尝试这样的事情：

$('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()放到此代码中，这是一个糟糕的解决方案。 = /

通过jquery管理按钮点击的最佳方式

4 个答案: