如何在骨干中的动态生成按钮上绑定事件?

时间:2011-08-08 19:19:25

标签: javascript jquery backbone.js underscore.js

如何在backbone.js中的动态生成按钮上绑定click事件?

 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");
    },

单击#display-nodes时,节点会根据需要显示,但.display不起作用。如何让这个按钮调用函数?

1 个答案:

答案 0 :(得分:33)

只要动态生成的DOM元素是视图events的后代,Backbone视图就可以通过el属性从动态生成的DOM元素接收事件。相关代码位于delegateEvents()。它使用jQuery的delegate()选择器方法。

最不可能的原因是新创建的<button>不是视图el的后代。我是对的吗?

如果是这种情况,并且您希望将该元素保留在视图的el之外,则可以将其从视图的events属性中删除,并委托视图中的其他元素{{1}方法。