Xử lý sự kiện jQuery .on() không hoạt động

Question

Tôi muốn đính kèm một sự kiện vào lớp phần tử được tạo động. Do đó tôi đã sử dụng chức năng trực tiếp nhưng nó không được kích hoạt. Vì vậy, hãy chọn live function reference, ở đó tôi có màu đỏ bên dưới ghi chú

Do jQuery 1.7, phương thức .live() không còn được dùng nữa. Sử dụng .on() để đính kèm trình xử lý sự kiện. Người dùng các phiên bản cũ hơn của jQuery nên sử dụng .delegate() trong tùy chọn .live().

vì vậy hãy quyết định sử dụng chức năng on, nhưng vẫn không hoạt động. Trường văn bản đã được đính kèm với jquery ui datpicker.On một phần tử khác đã chọn tôi đã tắt trường đó.

jQuery("#from").attr('disabled','disabled') 
.removeClass('date_picker_bg') 
.removeClass('hasDatepicker') 
.addClass('date_picker_disabled'); 

sau khi tàn tật nếu tôi bấm i muốn hiển thị cảnh báo hoặc tooltip.so tôi đã cố gắng này, nhưng không phải làm việc

jQuery(".date_picker_disabled").on("click", function(event){ 
      alert('hi'); 
    }); 

gì có thể là vấn đề

Tôi đang sử dụng jquery 1.7. 1 (jquery-1.7.1.min.js)

Answer 1

Vấn đề là jQuery(".date_picker_disabled") tìm các phần tử với lớp đó và liên kết với chúng. Nếu các phần tử không có lớp tại thời điểm ràng buộc được thực hiện, các sự kiện sẽ không được xử lý.

Chức năng on cho phép bạn làm tròn điều này bằng cách xử lý chúng trên phần tử khác khi sự kiện "bong bóng tối đa" thành phần chính. Trong trường hợp này, chúng tôi có thể nói phần tử body - có thể có một phụ huynh phổ biến cụ thể hơn mà bạn có thể chọn.

jQuery(document.body).on('click', '.date_picker_disabled', function(event) { 
    alert('hi'); 
}); 

Trình xử lý sự kiện hiện được liên kết với yếu tố document.body. Tất cả các nhấp chuột xảy ra ở bất cứ nơi nào trong cơ thể đều được kiểm tra để xem chúng có xuất phát từ một phần tử khớp với bộ chọn hay không. Nếu vậy, xử lý được bắn.

Điều này được giải thích trên tài liệu về chức năng on. Đó là hành vi tương tự như đã có trong các phiên bản trước của jQuery với các hàm live và delegate.

---

Có một cái nhìn khác về mã của bạn, bạn có disabled="disabled" đặt trên phần tử input. Các sự kiện click không được kích hoạt trên các phần tử bị vô hiệu hóa.

Answer 2

Đây là điều khó khăn.

Khi mã của bạn chạy, phần tử của bạn không có lớp .date_picker_disabled để số jQuery(".date_picker_disabled") của bạn không trả về gì và .on() không được gọi.

Áp dụng .Trên() trên các yếu tố bên ngoài và sử dụng tham số selector:

// you can also do $(document).on() 
$(<outer element>).on('click', '.date_picker_disabled', function() { 
    // do something 
}); 

này sẽ ủy các sự kiện vào <outer element>. Trình xử lý sẽ chỉ được thực hiện nếu một phần tử có lớp .date_picker_disabled đã được nhấp (tham số thứ hai).

Answer 3

Từ các tài liệu của .live():

Viết lại phương pháp .live() về kế của nó là đơn giản; đây là những mẫu cho các cuộc gọi tương đương cho tất cả phương pháp tập tin đính kèm ba sự kiện:

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

Vì vậy, trong trường hợp của bạn, bạn sẽ làm gì:

$(document).on('click', '.date_picker_disabled', function(event){ 
    alert('hi'); 
}); 

Answer 4

Có lẽ bạn nên làm:

jQuery("body").on("click",".date_picker_disabled", function(event){ 
      alert('hi'); 
    }); 

theo cách này, bạn đính kèm trình xử lý sự kiện vào bosy và chỉ định kích hoạt sự kiện đó khi bộ chọn ".date_picker_disabled" i s phù hợp.
BTW này là chính xác cách thức làm việc live()

Answer 5

Tôi đã sử dụng jQuery 1.7.2 và đã thử tất cả các phương pháp đề xuất:

Không làm việc:

$(document.body).on('click', '.collapsible-toggle' function() { 
    console.log('clicked'); 
}); 

Không làm việc:

$(document).on('click', '.collapsible-toggle' function() { 
    console.log('clicked'); 
}); 

Không e trong số họ đã làm việc cho đến khi tôi thử các cách sau:

----- Đã hoạt động! ----

$('body .collapsible-toggle').on('click', function() { 
     console.log('clicked'); 
}); 

Answer 6

thử:

$(document.body).on("click", ".date_picker_disabled", function() { 
    alert('hi'); 
}); 

document.body giúp cho html động quá. Chỉ cần chekc nó ra: .on not working on dynamic html