jquery tinggal melayang

161

Saya menggunakan kode jquery berikut untuk menunjukkan tombol hapus kontekstual hanya untuk baris tabel yang kita arahkan dengan mouse kita. Ini berfungsi tetapi tidak untuk baris yang telah ditambahkan dengan js / ajax on the fly ...

Apakah ada cara untuk membuat ini bekerja dengan acara langsung?

$("table tr").hover(
  function () {},
  function () {}
);
jquery live jquery-1.4 Jorre
sumber

Jawaban:

245

jQuery 1.4.1 sekarang mendukung "hover" untuk acara langsung (), tetapi hanya dengan satu fungsi pengendali acara:

$("table tr").live("hover",

function () {

});

Atau, Anda dapat menyediakan dua fungsi, satu untuk mouseenter dan satu untuk mouseous:

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});
Philippe Leybaert
sumber
Itu masih tidak bekerja untuk saya. Saya mencoba melakukan ini: Di ​​mana saya salah? > $ ('table tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});
Shripad Krishna
1
ini salah dan tidak berfungsi. lihat tajuk "Beberapa Acara" di bawah dokumentasi untuk live: api.jquery.com/live
Jason
34
Pada jQuery 1.4.2, .live ("hover") setara dengan .live ("mouseover mouseout"), BUKAN .live ("mouseenter mouseleave") - lihat bugs.jquery.com/ticket/6077 Jadi, lakukan. live ("mouseenter mouseleave", function () {...}), atau .live ("mouseenter", function () {...}). live ("mouseleave", function () {...})
aem
2
terima kasih @ aem, ini bekerja untuk saya: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});
jackocnr
3
Sesuai halaman dokumentasi JQuery yang.live dikatakan untuk digunakan .onsebagai gantinya. "Pada jQuery 1.7, metode .live () sudah tidak digunakan lagi. Gunakan .on () untuk melampirkan event handler."
johntrepreneur
110 
$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/

dmitko
sumber
Bekerja untuk saya juga. +1 Mencoba melakukan versi Philippe, baik dengan mouseover dan mouseenter - tidak berfungsi. Tapi yang ini berhasil. Terima kasih!
eduncan911
.livesudah ditinggalkan sekarang, lihat jawaban Andre untuk metode penggantian sekarang.
johntrepreneur
1
Menggunakan mouseoverdan mouseoutperistiwa di sini akan menyebabkan kode terus menyala saat pengguna menggerakkan mouse di dalam elemen. Saya pikir mouseenterdan mouseleavelebih tepat karena hanya akan menyala sekali saat masuk.
johntrepreneur
60

.live() telah ditinggalkan sejak jQuery 1.7

Gunakan .on()sebaliknya dan tentukan pemilih keturunan

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector
Andre
sumber
6
ini berfungsi dengan sempurna pada jquery 1.9. semua solusi langsung dan delegasi DIHAPUSKAN! akan luar biasa jika seseorang dapat menerima jawaban yang diterima dan menerima yang ini sebagai gantinya.
jascha
5

Pada jQuery 1.4.1, acara hover berfungsi dengan live(). Pada dasarnya hanya mengikat ke mouseenter dan acara mouseleave, yang dapat Anda lakukan dengan versi sebelum 1.4.1 juga:

$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

Ini membutuhkan dua ikatan tetapi berfungsi juga.

Tatu Ulmanen
sumber
5

Kode ini berfungsi:

    $(".ui-button-text").live(
        'hover',
        function (ev) {
            if (ev.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            }

            if (ev.type == 'mouseout') {
                $(this).removeClass("ui-state-hover");
            }
        });
Jorge E. Cardona
sumber
2
Apa itu "ui-state-hover"? Bagaimana itu berlaku untuk pertanyaan awal pengguna?
IgorGanapolsky
2

PERINGATAN: Ada penalti performa yang signifikan dengan versi live hover. Ini terutama terlihat di halaman besar di IE8.

Saya sedang mengerjakan proyek tempat kami memuat menu multi-level dengan AJAX (kami punya alasan kami :). Lagi pula, saya menggunakan metode langsung untuk hover yang bekerja sangat baik pada Chrome (IE9 tidak apa-apa, tapi tidak hebat). Namun, di IE8 Itu tidak hanya memperlambat menu (Anda harus melayang selama beberapa detik sebelum akan turun), tetapi semua yang ada di halaman itu sangat lambat, termasuk menggulir dan bahkan memeriksa kotak centang sederhana.

Mengikat acara langsung setelah dimuat menghasilkan kinerja yang memadai.

Brian
sumber
2
berguna, tetapi lebih banyak komentar daripada jawaban.
mikemaccana