Лучший способ управлять нажатием кнопки через JQuery - PullRequest
Новая
       35

Лучший способ управлять нажатием кнопки через JQuery

0 голосов
/ 05 ноября 2011

в моем веб-приложении jquery мне нужно управлять несколькими видами кнопок. У всех кнопок есть класс пользовательской кнопки 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 для управления действиями кнопки. Например,

  • если пользователь нажимает кнопку div.ui без других классов CSS, браузер переходит на www.google.it
  • если пользователь нажимает на div.ui-button.ui-search, браузер открывает диалог для ввода текста
  • если пользователь нажимает на div.ui-button.ui-submit, браузер отправляет родительскую форму кнопки
  • если пользователь нажимает на div.ui-button.ui-actionX, браузер выполняет действиеX.

Итак, можете ли вы дать мне представление о том, как прикреплять события к кнопкам без конфликтов?

Спасибо.

Ответы [ 4 ]

2 голосов
/ 05 ноября 2011

Лучше всего было бы добавить ui-button-google, тогда вы можете четко привязать все кнопки по отдельности.

В jQuery 1.7 включено / выключено, поэтому все, что вам нужно сделать, это настроить таргетинг на каждую из них:*

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

Если вы не добавите класс к кнопке Google, вы можете альтернативно привязаться к общей кнопке пользовательского интерфейса и проверить наличие классов на кнопке. 

$('.ui-button').on('click', function(){
  if $(this).hasClass('ui-button-search'){
    //search 
  }
  else if $(this).hasClass('ui-button-submit') {
    //submit
  }
...
  else {
    //google
  });
0 голосов
/ 05 ноября 2011 
$('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;
    }
});
0 голосов
/ 05 ноября 2011

Вы можете просто прикрепить обработчики кликов по классу 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 });
0 голосов
/ 05 ноября 2011

Я бы попробовал что-то вроде этого: 

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

Edit:

Нужно поставить .unbind(), чтобы этот код работал, что делает его плохим решением. = /

...