javascript - How to bind events on dynamic generated buttons in backbone?

Question

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?

Answer 1

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.