How to bind events on dynamic generated buttons in backbone?
A Backbone view can receive events from dynamically generated DOM elements, through the events
property, as long as the dynamically generated DOM elements are descendants of the view's el
. The relevant code is in delegateEvents(). It uses jQuery's delegate() selector method.
The most likely reason it's not working for you is that the newly created <button>
is not a descendant of the view's el
. Am I right?
If this is the case and you want to keep the element outside of the view's el
, you can remove it from your view's events
property and delegate on another element in your view's init
method.
JABD
Updated on August 16, 2022Comments
-
JABD over 1 year
How do I bind click event on dynamic generated buttons in 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"); },
On clicking
#display-nodes
the nodes are displayed as required but.display
is not working. How do I make this button call the function? -
UpTheCreek over 12 years@Eric - if it solved your problem and you're not waiting for further answers, you should mark as accepted answer.