2012-03-14 32 views
5

Tôi khá mới với phương thức on() trong jQuery nhưng đã đến lúc tôi cần sử dụng nó.Không thể đưa jQuery vào() để đăng ký nội dung được thêm động

Tôi có hai chức năng để nhấp vào các nút cụ thể. Mỗi chức năng hoạt động trên bất kỳ yếu tố nào ban đầu trên trang nhưng không hoạt động trên bất kỳ nội dung được thêm động nào (nhiều nút giống nhau). Tôi hiểu rằng tôi cần sử dụng hàm on() sau khi đọc các câu trả lời khác trên đây và trên Google nhưng vẫn gặp sự cố. Dù sao, mã:

jQuery("ul#THEBUTTONS").on({ 
    click: function(event){ 
     event.preventDefault(); 
     console.log("apaz clicked"); 
    } 
}, "a.azaz"); 


jQuery("ul#THEBUTTONS").on({ 
    click: function(event){ 
     event.preventDefault(); 
     console.log("mapaz clicked"); 
    } 
}, "a.mapaz"); 

Bất kỳ trợ giúp nào sẽ được đánh giá cao, xé tóc ra ở đây.

Trả lời

8

.on() về cơ bản có hai hương vị: một hoạt động như .bind() và một hoạt động khác như .delegate().

Đối với sự cố của bạn, bạn muốn sử dụng phiên bản delegate. Là một tài liệu tham khảo, on chữ ký là như thế này:

// bind 
$(element-selector).on(event, handler) 

// delegate 
$(container-selector).on(event, element-selector, handler) 

Cách tốt nhất để có được tốc độ với điều này có lẽ là to read up on delegate, nó là gì, sử dụng như thế nào, và sau đó áp dụng đó để on.

+0

Cảm ơn bạn đã trả lời. Một lần nữa điều này (và do đó những gì @Anthony Grist đề xuất quá) chỉ phục vụ để làm cho các yếu tố ban đầu có thể nhấp được. Nếu có bất kỳ sự trợ giúp nào, tôi sẽ lấy phần tử ra khỏi nơi khác bằng phương thức .html() và chèn lại nó ở nơi khác. – tristyb

+0

Điều thú vị là nếu bộ chọn vùng chứa cao hơn nội dung tôi đã thêm động, vì vậy, ngay cả khi, cơ thể, thì nó sẽ ngừng hoạt động. – tristyb

+0

Nếu bạn chỉ lấy HTML, thì trình xử lý sự kiện mà bạn đã gắn với các yếu tố đó sẽ không được thực hiện với nó. Bạn nên làm tốt hơn để sử dụng '$(). Clone (true, true)' thay vào đó, hoặc để tát các phần tử mới bên trong một container nơi bạn đã gán lệnh 'delegate'. –

1

Có hai cách để sử dụng .on() và bạn đang sử dụng sai loại.

Bạn có thể ràng buộc xử lý sự kiện trực tiếp đến các yếu tố sử dụng $('selector for elements you want the event handler bound to').on('event', function() {...});

Hoặc, bạn có thể ủy sự kiện, bằng cách gọi .on() trên một yếu tố wrapper sẽ chứa tất cả các yếu tố năng động nhất, chẳng hạn như một div hoặc trong trường hợp xấu nhất, phần tử <body>. Mã sẽ giống như thế này:

<div id="wrapper"> 
    <a href="#" class="link">Test link</a> 
</div> 

$('#wrapper').on('click', '.link', function(e) { 
    // code to handle the click event on the link here 
}); 

Các xử lý sự kiện thực sự xử lý bởi các yếu tố <div id="wrapper"> sau khi sự kiện sôi nổi nó, nhưng chức năng chỉ được gọi nếu mục tiêu ban đầu phù hợp với chọn cung cấp. Với phương thức này, bạn có thể tự động thêm các phần tử bổ sung với lớp link vào div và hàm cũng sẽ chạy khi chúng được nhấp vào.

+0

Người hỏi đang đăng ký một bản đồ xử lý, không phải là một trình xử lý duy nhất, vì vậy 'on (eventMap, selector)' là biểu mẫu phù hợp để sử dụng. –

+0

@ FrédéricHamidi Tốt, có vẻ như tôi đã không đọc đủ câu hỏi. –

Các vấn đề liên quan