JQuery .on ve vurgulu kullanmak mümkün müdür?

Ben <ul>ilk sayfa yüklendikten sonra javascript ile doldurulmuş bir var. Şu anda ve .bindile kullanıyorum .mouseovermouseout

Proje sadece jQuery 1.7 için güncellendi, bu yüzden kullanma seçeneğim var .on, ancak çalışmak için alamıyorum gibi görünüyor hover. Kullanmak mümkün mü .onile hover?

EDIT : Bağlandığım öğeleri belge yüklendikten sonra javascript ile yüklenir. Bu yüzden onsadece kullanmıyorum hover.

( JavaScript ile doldurulmuş öğelerle kullanmanız gerekiyorsa bu cevaptaki son düzenlemeye bakın.on() )

JavaScript kullanılarak doldurulmamış öğeler için bunu kullanın:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()kendi işleyicisi var: http://api.jquery.com/hover/

Birden fazla şey yapmak istiyorsanız, bunları .on()işleyicide şöyle zincirleyin :

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

Kullanabileceğiniz Aşağıda verilen cevaplara göre hoverolan .on(), ancak:

Yeni kod için kesinlikle önerilmez, ancak "mouseenter mouseleave" dizesi için bir kısayol olarak sözde olay adı "hover" ifadesini kullanabilirsiniz. Bu iki olay için tek bir olay işleyicisi ekler ve işleyicinin, olayın fare merkezi veya fare parçası olup olmadığını belirlemek için event.type öğesini incelemesi gerekir. "Hover" sözde olay-adını, bir veya iki işlevi kabul eden .hover () yöntemiyle karıştırmayın.

Ayrıca, kullanmanın hiçbir performans avantajı yoktur ve sadece mouseenterveya kullanmaktan daha hantaldır mouseleave. Verdiğim cevap daha az kod gerektiriyor ve böyle bir şey elde etmenin doğru yoludur.

DÜZENLE

Bu sorunun yanıtlanmasından bu yana bir süre geçti ve bir miktar çekiş kazanmış gibi görünüyor. Yukarıdaki kod hala duruyor, ama orijinal cevabım için bir şeyler eklemek istedim.

Kullanmayı tercih ederken mouseenterve mouseleave(kodda neler olduğunu anlamama yardımcı olur) ile .on()aşağıdakileri yazmakla aynıhover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

Orijinal soru düzgün biçimde nasıl kullanacaklarını sormak mi yana on()olan hover(), ben kullanımını düzeltmek düşündüm on()ve gerekli eklemek bulamadık hover()zamanda kod.

11 ARALIK 2012 DÜZENLE

Aşağıda verilen bazı yeni yanıtlar , söz konusu JavaScript kullanılarak doldurulursa nasıl .on()çalışması gerektiğini ayrıntılı divolarak açıklar. Örneğin, diyelim ki bir divjQuery'nin .load()etkinliğini kullanarak şunun gibi doldurursunuz :

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

Yukarıdaki kod .on()dayanamaz. Bunun yerine, kodunuzu biraz değiştirmelisiniz, şöyle:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

Bu kod, bir .load()etkinlik gerçekleştikten sonra JavaScript ile doldurulmuş bir öğe için çalışır . Argümanınızı uygun seçiciyle değiştirin.

Bu çözümlerin hiçbiri, belge soru istekleri olarak yüklendikten sonra oluşturulan nesnelerin üzerine / dışına fareyi yerleştirirken benim için çalışmadı. Bu sorunun eski olduğunu biliyorum ama hala arayanlar için bir çözümüm var:

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

Bu, işlevleri seçiciye bağlayacaktır, böylece belge hazır olduktan sonra bu seçiciye sahip nesneler yine de çağırabilecektir.

Javascriptinizin geri kalanı neye benzediğinden emin değilim, bu yüzden herhangi bir parazit olup olmadığını söyleyemeyeceğim. Ama .hover()bir olay olarak gayet iyi çalışıyor .on().

$("#foo").on("hover", function() {
  // disco
});

Olaylarını kullanabilmek istiyorsanız, olaydan döndürülen nesneyi kullanın:

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

jQuery vurgulu işlevi fareyle üzerine gelme ve fareyle üzerine gelme işlevselliği sağlar.

$ (Seçici) .hover (inFunction, ÇIKIŞ fonksiyonu);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

Kaynak: http://www.w3schools.com/jquery/event_hover.asp

Sadece internetten içeri girdi ve katkıda bulunabileceğimi hissettim. Ben yukarıdaki kodu @calethebrewer tarafından yayınlanan ile seçici ve beklenmedik davranış üzerinde birden fazla çağrı ile sonuçlanabileceğini fark ettim: -

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

Bu keman http://jsfiddle.net/TWskH/12/ benim açımdan resmediyor. Eklentiler gibi öğeleri canlandırırken, bu çoklu tetikleyicilerin, animasyon veya kodun gereğinden fazla çağrılmasına neden olabilecek istenmeyen davranışlarla sonuçlandığını gördüm.

Benim önerim sadece mouseenter / mouseleave ile değiştirmek: -

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

Bu, animasyonumun birden çok örneğinin çağrılmasını engellemesine rağmen, sonunda ebeveynin çocuklarının ne zaman üzerinde durulduğunu belirlemek için fareyle üzerine gelme / fareyle ayrıldım.

Sen kullanabilirsiniz .on()ile hoverEk Notlar bölümde söylenenler yaparak:

Yeni kod için kesinlikle önerilmez, ancak "mouseenter mouseleave" dizesi için bir kısayol olarak sözde olay adı "hover" ifadesini kullanabilirsiniz. Bu iki olay için tek bir olay işleyicisi ekler ve işleyicinin, olayın fare merkezi veya fare parçası olup olmadığını belirlemek için event.type öğesini incelemesi gerekir. "Hover" sözde olay-adını, bir veya iki işlevi kabul eden .hover () yöntemiyle karıştırmayın.

Bu aşağıdakileri yapmak olacaktır:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

EDIT (jQuery 1.8+ kullanıcıları için not):

JQuery 1.8'de kullanımdan kaldırıldı, 1.9'da kaldırıldı: "Fareyle üzerine gelme" adı, "mouseenter mouseleave" dizesi için bir kısayol olarak kullanılır. Bu iki olay için tek bir olay işleyicisi ekler ve işleyicinin, olayın fare merkezi veya fare parçası olup olmadığını belirlemek için event.type öğesini incelemesi gerekir. "Hover" sözde olay-adını, bir veya iki işlevi kabul eden .hover () yöntemiyle karıştırmayın.

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

Bir boşlukla ayrılmış bir veya birden fazla etkinlik türü sağlayabilirsiniz.

Yani hovereşittirmouseenter mouseleave .

Bu benim sözüm:

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Başka bir olayda koşul olması gerekiyorsa, bu şekilde çözdüm:

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

Ardından başka bir etkinlikte kolayca kullanabilirsiniz:

 if ($(this).data('hover')){
      //...
 }

(Bunu is(':hover')çözmek için bazılarını görüyorum . Ama bu (henüz) geçerli bir jQuery seçici değil ve tüm uyumlu tarayıcılarda çalışmıyor)

JQuery eklentisi hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html , burada listelenen saf yaklaşımlardan çok daha ileri gider. Kesinlikle çalışıyor olsalar da, kullanıcıların beklediği gibi davranmayabilirler.

HoverIntent'i kullanmanın en güçlü nedeni zaman aşımı özelliğidir. Bir menünün kapanmasını önlemek gibi şeyler yapmanızı sağlar, çünkü bir kullanıcı istediği öğeyi tıklamadan önce faresini biraz sağa veya sola sürükler. Ayrıca, bir barajda fareyle üzerine gelme olaylarını etkinleştirmeme yetenekleri sağlar ve odaklanmış fareyle üzerine gelmeyi bekler.

Kullanım örneği:

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

Bununla ilgili daha fazla açıklama https://stackoverflow.com/a/1089381/37055 adresinde bulunabilir.