jquery canlı durun


161

Ben sadece fare ile üzerinde duruyoruz tablo satırları için bir bağlamsal silme düğmesini göstermek için aşağıdaki jquery kodu kullanıyorum. Bu işe yarar ama anında js / ajax ile eklenen satırlar için değil ...

Bunu canlı etkinliklerle yapmanın bir yolu var mı?

$("table tr").hover(
  function () {},
  function () {}
);

Yanıtlar:


245

jQuery 1.4.1 artık live () olayları için "fareyle üzerine gelme" işlevini destekliyor, ancak yalnızca bir olay işleyici işleviyle:

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

function () {

});

Alternatif olarak, biri mouseenter ve diğeri mouseleave için olmak üzere iki işlev sağlayabilirsiniz:

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

    },
    mouseleave: function () {

    }
});

Yine de benim için çalışmıyor. Bunu yapmaya çalıştım: Nerede yanlış yapıyorum? > $ ('table tr'). live ('vurgulu', işlev () {$ (this) .find ('. deletebutton'). toggle ();});
Shripad Krishna

1
bu yanlıştır ve çalışmaz. api.jquery.com/livelive
Jason,

34
JQuery 1.4.2 itibariyle .live ( "vurgulu") ( "MouseEnter mouseLeave"), ( "fare mouseout") .live DEĞİL .live eşdeğerdir - bakınız bugs.jquery.com/ticket/6077 So do. live ("mouseenter mouseleave", işlev () {...}) veya .live ("mouseenter", işlev () {...}). live ("mouseleave", işlev () {...})
aem

2
teşekkür ederim @aem, bu benim için çalıştı: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});
jackocnr

3
Gereğince JQuery .livedokümantasyon sayfasına kullanımı diyor .onyerine. "JQuery 1.7'den itibaren .live () yöntemi kullanımdan kaldırıldı. Olay işleyicileri eklemek için .on () kullanın."
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/


Benim için de çalıştı. +1 Hem fare hem fare kullanıcısı ile Philippe'in versiyonunu yapmaya çalıştım - ikisi de işe yaramadı. Ama bunu yaptı. Teşekkürler!
eduncan911

.liveartık kullanımdan kaldırıldı, şimdi Andre'nin değiştirme yöntemi için cevabına bakın.
johntrepreneur

1
Burada mouseoverve mouseoutolayların kullanılması , kullanıcı fareyi öğenin içinde hareket ettirdikçe kodun sürekli olarak tetiklenmesine neden olur. Bence mouseenterve mouseleavedaha uygun çünkü girişte sadece bir kez ateş edecek.
johntrepreneur

60

.live() jQuery 1.7 itibarıyla kullanımdan kaldırılmıştır

.on()Bunun yerine kullanın ve bir alt seçici belirtin

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

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector

6
Bu jquery 1.9 itibariyle kusursuz çalışır. tüm canlı ve delege çözümleri DEPRECATED! Birisi kabul edilen cevabı kabul edemez ve bunun yerine bunu kabul ederse harika olurdu.
jascha

5

JQuery 1.4.1 itibariyle, hover olayı ile çalışır live(). Temel olarak, sadece 1.4.1'den önceki sürümlerle de yapabileceğiniz fare merkezi ve fare yarışı olaylarına bağlanır:

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

Bu iki bağlama gerektirir, ancak aynı şekilde çalışır.


5

Bu kod çalışır:

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

2
"Ui-state-hover" nedir? Bu kullanıcının orijinal sorusu için nasıl geçerlidir?
IgorGanapolsky

2

UYARI: Fareyle üzerine gelmenin canlı sürümünde önemli bir performans cezası vardır. Özellikle IE8'deki büyük bir sayfada fark edilir.

AJAX ile çok seviyeli menüler yüklediğimiz bir proje üzerinde çalışıyorum (nedenlerimiz var :). Her neyse, Chrome'da harika çalışan vurgulu için canlı yöntemi kullandım (IE9 tamam, ancak harika değil). Ancak, IE8'de Sadece menüleri yavaşlatmakla kalmadı (düşmeden önce birkaç saniye boyunca durmanız gerekiyordu), ancak sayfadaki her şey, kaydırma ve hatta basit onay kutularını kontrol etmek de dahil olmak üzere acı verici şekilde yavaştı.

Olayları yüklendikten hemen sonra bağlamak yeterli performansa neden oldu.


2
yararlı, ama bir cevaptan daha çok bir yorum.
mikemaccana
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.