Метод JQuery .on () з декількома обробниками подій на один селектор


139

Намагаючись розібратися, як використовувати метод Jquery .on () з певним селектором, з яким пов'язано кілька подій. Раніше я використовував метод .live (), але не зовсім впевнений, як здійснити той самий подвиг з .on (). Будь ласка, дивіться мій код нижче:

$("table.planning_grid td").live({
  mouseenter:function(){
     $(this).parent("tr").find("a.delete").show();
  },
  mouseleave:function(){
     $(this).parent("tr").find("a.delete").hide();        
  },
  click:function(){
    //do something else.
  }
});

Я знаю, що можу призначити кілька подій, зателефонувавши:

 $("table.planning_grid td").on({
    mouseenter:function(){  //see above
    },
    mouseleave:function(){ //see above
    }
    click:function(){ //etc
    }
  });

Але я вважаю, що правильне використання .on () буде таким:

   $("table.planning_grid").on('mouseenter','td',function(){});

Чи є спосіб досягти цього? Або яка найкраща практика тут? Я спробував код нижче, але без кісток.

$("table.planning_grid").on('td',{
   mouseenter: function(){ /* event1 */ }, 
   mouseleave: function(){ /* event2 */ },
   click: function(){  /* event3 */ }
 });

Спасибі заздалегідь!

Відповіді:


252

Це навпаки . Ви повинні написати:

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");

1
Чому не селектор $("table.planning_grid td")?
Мюерс

11
@Muers, вона також буде працювати і запитувач визнає це, але і вважає , що він повинен зв'язати подія на <table>замість кожного окремого <td>елемента, який дійсно правильний шлях.
Фредерік Хаміді

37
Є вагомий привід використовувати .on на <table>, а не на <td>, і це якщо ви динамічно додасте <td> s пізніше. $ ('table td'). on ... буде впливати лише на <td>, які знаходяться в таблиці, в той момент, коли ви викликаєте цю функцію. $ ('table'). on (..., 'td', function ...) вплине на будь-який <td>, який ви додасте до цієї таблиці пізніше.
Раанан

8
@Raanan, дійсно, і крім того, кожен обробник подій, який реєструється, має вартість, хоч і невелику. Коли ви маєте справу з тисячами комірок, реєстрація одного обробника <table>замість одного обробника на <td>елемент стає обов'язковим для досягнення корисної продуктивності.
Фредерік Hamidi

1
Домовились. Дуже складно гуглати це запитання як "на" - таке поширене слово, і більшість результатів стосувалися .bindі .live. Гарна відповідь, що я шукав: D @ Frédéric - Ваше посилання більше не посилається на заголовок idна сторінці документів jquery. Можливо, результат оновленої документації. Але я не зміг знайти цю відповідь на цій сторінці.
nzifnab

186

Крім того, якщо до одного селектора, який виконує ту саму функцію, було долучено декілька обробників подій, ви можете використовувати

$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});

5
це те, що я шукав
RozzA

... а потім отримайте фактичний тип запущеної події з e.type (після додавання події в якості параметра, тобто ... функції (e) ...
William T. Mallard

24

Якщо ви хочете використовувати одну і ту ж функцію в різних подіях, може бути використаний наступний блок коду

$('input').on('keyup blur focus', function () {
   //function block
})

11

Звідси я дізнався щось дійсно корисне та фундаментальне .

ланцюжка функцій є дуже корисним в цьому випадку , який працює на більшості функцій JQuery в тому числі на виході функції теж.

Він працює, тому що вихід більшості функцій jQuery - це набори вхідних об'єктів, тому ви можете використовувати їх відразу та робити їх коротшими та розумнішими

function showPhotos() {
    $(this).find("span").slideToggle();
}

$(".photos")
    .on("mouseenter", "li", showPhotos)
    .on("mouseleave", "li", showPhotos);

7

І ви можете комбінувати ті самі події / функції таким чином:

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    'click blur paste' : function() {
        // Handle click...
    }
}, "input");

1

Спробуйте з наступним кодом:

$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change', 
  function() {

  }
);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.