Metode JQuery .on () dengan beberapa penangan kejadian ke satu selektor

142

Mencoba mencari cara untuk menggunakan metode Jquery .on () dengan selektor tertentu yang memiliki beberapa kejadian yang terkait dengannya. Saya sebelumnya menggunakan metode .live (), tetapi tidak begitu yakin bagaimana mencapai prestasi yang sama dengan .on (). Silakan lihat kode saya di bawah ini:

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

Saya tahu saya dapat menetapkan beberapa acara dengan menelepon:

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

Tapi saya yakin penggunaan yang tepat dari .on () akan seperti ini:

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

Apakah ada cara untuk menyelesaikan ini? Atau apa praktik terbaik di sini? Saya mencoba kode di bawah ini, tetapi tidak ada dadu.

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

Terima kasih sebelumnya!

— butangphp
sumber

256

Itu sebaliknya . Anda harus menulis:

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

— Frédéric Hamidi
sumber

1

Mengapa pemilih tidak $("table.planning_grid td")?

— Muers

12

@Muers, ini juga akan berhasil dan penanya mengakuinya, tetapi juga percaya bahwa ia harus mengikat acara tersebut pada <table>setiap <td>elemen individu , yang memang merupakan cara yang tepat untuk melakukannya.

— Frédéric Hamidi

37

Ada alasan bagus untuk menggunakan .on di <tabel> dan bukan di <td> dan itu jika Anda secara dinamis menambahkan <td> nanti. $ ('table td'). on ... hanya akan mempengaruhi <td> yang ada dalam tabel saat Anda memanggil fungsi ini. $ ('table'). on (..., 'td', function ...) akan mempengaruhi <td> apapun yang akan Anda tambahkan ke tabel ini nanti.

— Raanan

8

@Raanan, memang, dan sebagai tambahan, setiap pengendali acara yang didaftarkan memiliki biaya, meskipun kecil. Saat Anda berurusan dengan ribuan sel, mendaftarkan satu penangan di <table>alih - alih satu penangan per <td>elemen menjadi wajib untuk mencapai kinerja yang dapat digunakan.

— Frédéric Hamidi

1

Sepakat. Sangat sulit untuk mencari pertanyaan ini di Google karena 'on' adalah kata yang umum dan sebagian besar hasil terkait dengan .binddan .live. Jawaban bagus, apa yang saya cari: D @ Frédéric - Tautan Anda tidak lagi menautkan ke header iddi halaman dokumen jquery. Mungkin hasil dari dokumentasi yang diperbarui. Tetapi saya tidak dapat menemukan jawaban ini di halaman itu.

— nzifnab

187

Selain itu, jika Anda memiliki beberapa penangan peristiwa yang terpasang ke pemilih yang sama yang menjalankan fungsi yang sama, Anda dapat menggunakan

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

— Pirijan
sumber

6

inilah yang saya cari

— RozzA

1

... dan kemudian dapatkan jenis peristiwa yang diaktifkan dengan e.type (setelah menambahkan peristiwa sebagai parameter, yaitu ... fungsi (e) ...

— William T. Mallard

24

Jika Anda ingin menggunakan fungsi yang sama pada acara yang berbeda, blok kode berikut dapat digunakan

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

— thakurdev
sumber

11

Saya belajar sesuatu yang sangat berguna dan mendasar dari sini .

fungsi rantai sangat berguna dalam hal ini yang berfungsi pada sebagian besar Fungsi jQuery termasuk juga pada keluaran fungsi.

Ini berfungsi karena output dari sebagian besar fungsi jQuery adalah set objek input sehingga Anda dapat segera menggunakannya dan membuatnya lebih pendek dan lebih cerdas

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

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

— Iman
sumber

7

Dan Anda dapat menggabungkan acara / fungsi yang sama dengan cara ini:

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

— angelmedia
sumber

1

Coba dengan kode berikut:

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

  }
);

— Yogesh
sumber