Sự thay đổi tên lớp Sự kiện trong jQuery

Question

Có cách nào để kích hoạt sự kiện trong jQuery khi một lớp yếu tố được thay đổi không?

Ví dụ:

<img class="selected" /> 

vào

<img class="selected newclass" /> 

gây nên một sự kiện

---

Và

<img class="selected" /> 

vào

<img class="" /> 

kích hoạt sự kiện

Answer 1

Bạn có thể có thể để workaround trên một cách hacky chút . Hook.addClass() & .removeClass() như vậy:

var _addClass = $.fn.addClass, 
    _removeClass = $.fn.removeClass; 

$.fn.addClass = function(){ 
    // do whatever here 
    return _addClass.apply(this, arguments); 
} 

$.fn.removeClass = function(){ 
    // do whatever here 
    return _removeClass.apply(this, arguments); 
} 

Bằng cách đó, giả sử bạn chỉ quan tâm đến việc theo dõi các yếu tố thay đổi lớp với jQuery, bạn có thể kích hoạt bất cứ mã trên adding hoặc removing lớp. Một lần nữa, chỉ khi bạn đang sử dụng jQuery, cho ví dụ này.

Tất nhiên, bạn có thể hook và overwrite mọi chức năng javascript theo cách đó.

Là Nick Craver được đề cập trong nhận xét, có một số phương pháp jQuery khác có thể add hoặc remove một lớp yếu tố. Bạn sẽ phải hook tất cả những người, cụ thể là:

.addClass() 
.removeClass() 
.toggleClass() 
.removeAttr('class') 
.attr('class', 'changed') 

trừ khi bạn biết chính xác phương pháp này được gọi là để thao tác một lớp học, bạn sẽ phải quan tâm đến tất cả những.

Answer 2

Tôi không nghĩ rằng đây là có thể.

Sự kiện dựa trên hành động của người dùng, do đó, nhấp, dblclick, di chuột qua vv là tất cả hành động của người dùng.

Bạn có thể muốn tạo một loại khối dữ liệu trên mỗi phần tử và sau đó xây dựng một hệ thống nhỏ tích hợp vào các phương thức jQuery .class() và .attr() để khi mã của bạn cập nhật một lớp, nó sẽ thêm dữ liệu vào phần tử đó. ,

sau đó nếu lớp trước khác với lớp học được đặt thì hãy kích hoạt sự kiện của bạn.

gì tôi có nghĩa là bằng cách tích hợp là

var old_ClassFunc = $.fn.class; //Save it 

var $.fn.class = function() 
{ 
    if($(this).data('old-class')) 
    { 
     if($(this).data('class_callback'))# 
     { 
      $(this).data('class_callback')(this); 
     } 
    } 
    $(this).data('old-class',$(this).attr('class')); //Update Data 
    return old_class.apply(this,arguments); 
} 

sau đó bạn có thể làm như

$('element').data('class_callback',function(context){ 
    alert('Element class has changed'); 
}) 

Hy vọng điều này mang đến cho bạn một số giúp đỡ