Có thể sử dụng jQuery .on và di chuột không?

Tôi có một <ul>cái được điền với javascript sau khi tải trang ban đầu. Tôi hiện đang sử dụng .bindvới mouseovervà mouseout.

Dự án vừa cập nhật lên jQuery 1.7 vì vậy tôi có tùy chọn để sử dụng .on, nhưng dường như tôi không thể làm cho nó hoạt động được hover. Có thể sử dụng .onvới hover?

EDIT : Các yếu tố tôi ràng buộc được tải bằng javascript sau khi tải tài liệu. Đó là lý do tại sao tôi đang sử dụng onvà không chỉ hover.

( Xem bản chỉnh sửa cuối cùng trong câu trả lời này nếu bạn cần sử dụng .on()với các phần tử được điền bằng JavaScript )

Sử dụng phần tử này cho các phần tử không được điền bằng JavaScript:

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

.hover()có trình xử lý riêng: http://api.jquery.com/hover/

Nếu bạn muốn làm nhiều việc, hãy xâu chuỗi chúng trong .on()trình xử lý như vậy:

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

Theo các câu trả lời được cung cấp dưới đây, bạn có thể sử dụng hovervới .on(), nhưng:

Mặc dù không khuyến khích mã mới, nhưng bạn có thể thấy tên giả "sự kiện" được sử dụng làm tốc ký cho chuỗi "mouseenter mouseleave". Nó đính kèm một trình xử lý sự kiện duy nhất cho hai sự kiện đó và trình xử lý phải kiểm tra event.type để xác định xem sự kiện đó là mouseenter hay mouseleave. Đừng nhầm lẫn tên giả "di chuột" với phương thức .hover (), chấp nhận một hoặc hai hàm.

Ngoài ra, không có lợi thế về hiệu suất khi sử dụng và nó cồng kềnh hơn so với chỉ sử dụng mouseenterhoặc mouseleave. Câu trả lời tôi cung cấp yêu cầu ít mã hơn và là cách thích hợp để đạt được thứ gì đó như thế này.

BIÊN TẬP

Đã được một thời gian kể từ khi câu hỏi này được trả lời và dường như nó đã đạt được một lực kéo. Đoạn mã trên vẫn đứng vững, nhưng tôi đã muốn thêm một cái gì đó vào câu trả lời ban đầu của mình.

Mặc dù tôi thích sử dụng mouseentervà mouseleave(giúp tôi hiểu những gì đang diễn ra trong mã) với .on()nó cũng giống như viết như sau vớihover()

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

Kể từ khi câu hỏi ban đầu đã hỏi làm thế nào họ có thể sử dụng đúng cách on()với hover(), tôi nghĩ tôi sẽ khắc phục sử dụng on()và không thấy cần phải thêm hover()mã tại thời điểm đó.

EDIT ngày 11 tháng 12 năm 2012

Một số câu trả lời mới được cung cấp dưới đây chi tiết cách .on()hoạt động nếu divcâu hỏi được điền bằng JavaScript. Ví dụ: giả sử bạn điền vào một sự kiện divbằng jQuery .load(), như vậy:

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

Các mã trên .on()sẽ không đứng. Thay vào đó, bạn nên sửa đổi mã của mình một chút, như thế này:

$(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

Mã này sẽ hoạt động cho một phần tử được điền bằng JavaScript sau khi một .load()sự kiện đã xảy ra. Chỉ cần thay đổi đối số của bạn để chọn phù hợp.

Không có giải pháp nào trong số các giải pháp này hoạt động với tôi khi di chuyển qua / ra các đối tượng được tạo sau khi tài liệu được tải dưới dạng yêu cầu câu hỏi. Tôi biết câu hỏi này đã cũ nhưng tôi có một giải pháp cho những người vẫn đang tìm kiếm:

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

Điều này sẽ liên kết các chức năng với bộ chọn để các đối tượng với bộ chọn này được tạo sau khi tài liệu đã sẵn sàng vẫn có thể gọi nó.

Tôi không chắc phần còn lại của Javascript của bạn trông như thế nào, vì vậy tôi sẽ không thể biết liệu có bất kỳ sự can thiệp nào không. Nhưng .hover()hoạt động tốt như là một sự kiện với .on().

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

Nếu bạn muốn có thể sử dụng các sự kiện của nó, hãy sử dụng đối tượng được trả về từ sự kiệ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/

Chức năng di chuột jQuery cung cấp chức năng di chuột và di chuột ra.

$ (bộ chọn) .hover (inFactor, outFunction);

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

Nguồn: http://www.w3schools.com/jquery/event_hover.asp

Chỉ cần lướt web và cảm thấy tôi có thể đóng góp. Tôi nhận thấy rằng với đoạn mã trên được đăng bởi @calethebrewer có thể dẫn đến nhiều cuộc gọi qua bộ chọn và hành vi không mong muốn chẳng hạn: -

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

Fiddle này http://jsfiddle.net/TWskH/12/ minh họa quan điểm của tôi. Khi kích hoạt các yếu tố như trong plugin tôi đã thấy rằng nhiều yếu tố kích hoạt này dẫn đến hành vi ngoài ý muốn có thể dẫn đến hoạt hình hoặc mã được gọi nhiều hơn mức cần thiết.

Đề nghị của tôi là chỉ cần thay thế bằng mouseenter / mouseleave: -

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

Mặc dù điều này ngăn không cho nhiều trường hợp hoạt hình của tôi được gọi, cuối cùng tôi đã đi với mouseover / mouseleave vì tôi cần xác định khi nào con cái của cha mẹ được di chuột qua.

Bạn có thể sử dụng .on()bằng hovercách thực hiện những gì phần Ghi chú bổ sung nói:

Mặc dù không khuyến khích mã mới, nhưng bạn có thể thấy tên giả "sự kiện" được sử dụng làm tốc ký cho chuỗi "mouseenter mouseleave". Nó đính kèm một trình xử lý sự kiện duy nhất cho hai sự kiện đó và trình xử lý phải kiểm tra event.type để xác định xem sự kiện đó là mouseenter hay mouseleave. Đừng nhầm lẫn tên giả "di chuột" với phương thức .hover (), chấp nhận một hoặc hai hàm.

Đó sẽ là làm như sau:

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

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

});

EDIT (lưu ý cho người dùng jQuery 1.8+):

Không dùng nữa trong jQuery 1.8, đã bị xóa trong 1.9: Tên "hover" được sử dụng làm tốc ký cho chuỗi "mouseenter mouseleave". Nó đính kèm một trình xử lý sự kiện duy nhất cho hai sự kiện đó và trình xử lý phải kiểm tra event.type để xác định xem sự kiện đó là mouseenter hay mouseleave. Đừng nhầm lẫn tên giả "di chuột" với phương thức .hover (), chấp nhận một hoặc hai hàm.

$("#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');

Bạn có thể cung cấp một hoặc nhiều loại sự kiện cách nhau bởi một dấu cách.

Vì vậy, hoverbằng mouseenter mouseleave.

Đây là sugession của tôi:

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

Nếu bạn cần nó như một điều kiện trong một sự kiện khác, tôi đã giải quyết nó theo cách này:

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

Sau đó, trong trường hợp khác, bạn có thể dễ dàng sử dụng nó:

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

(Tôi thấy một số sử dụng is(':hover')để giải quyết vấn đề này. Nhưng đây chưa phải (chưa) một bộ chọn jQuery hợp lệ và không hoạt động trong tất cả các trình duyệt tương thích)

Các jQuery plugin hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html đi nhiều hơn nữa so với các phương pháp tiếp cận ngây thơ liệt kê ở đây. Trong khi họ chắc chắn làm việc, họ có thể không nhất thiết phải cư xử như thế nào người dùng mong đợi.

Lý do mạnh mẽ nhất để sử dụng hoverIntent là thời gian chờ tính năng. Nó cho phép bạn thực hiện những việc như ngăn menu đóng lại vì người dùng kéo chuột hơi quá xa sang phải hoặc trái trước khi họ nhấp vào mục họ muốn. Nó cũng cung cấp khả năng không kích hoạt hover sự kiện trong một đập và chờ đợi lơ lửng tập trung.

Ví dụ sử dụng:

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 )

Giải thích thêm về điều này có thể được tìm thấy trên https://stackoverflow.com/a/1089381/37055