Làm cách nào để ràng buộc các sự kiện trên các nút được tạo động trong xương sống?

Question

Làm cách nào để liên kết sự kiện nhấp chuột trên các nút được tạo động trong backbone.js?

window.PackageView = Backbone.View.extend({ 

    tagName: "div", 

    className: "package-template", 

    events:{ 
     'click #display-nodes' : 'main', // This button is declared in my HTML code and calls main method successfully. 
     'click .display'  : 'disp', // This is dynamic button generated with class as display 
    }, 

    getAction: function(nodeId){ // Get Actions from NodeId and generate buttons 
     $('.nodes').append("<button>" + action.Name + "</button>"); //Generate Buttons 
     $(".nodes button").addClass("display"); 
    }, 

    disp: function(){ 
     alert("Inside Disp Function"); 
    }, 

Khi nhấp vào #display-nodes các nút được hiển thị theo yêu cầu nhưng .display không hoạt động. Làm cách nào để nút này gọi hàm?

Answer 1

Chế độ xem xương sống có thể nhận sự kiện từ các phần tử DOM được tạo động, thông qua thuộc tính events, miễn là các phần tử DOM được tạo động là hậu duệ của chế độ xem el. Mã có liên quan là delegateEvents(). Nó sử dụng phương pháp chọn delegate() của jQuery.

Lý do có khả năng nhất không phù hợp với bạn là số <button> mới được tạo không phải là hậu duệ của chế độ xem el. Tôi có đúng không?

Nếu trường hợp này xảy ra và bạn muốn giữ nguyên tố bên ngoài của chế độ xem el, bạn có thể xóa nó khỏi thuộc tính events của chế độ xem của bạn và ủy quyền trên một phần tử khác trong phương pháp init của chế độ xem của bạn.