Question

我有一个section元素id = wrapper。在我的路由器中，我添加.delegate() jQuery方法将事件委托给动态创建的按钮（因为传统的events:{"click button" : "gotoSomeMethod"}对我不起作用）。

 $(document).ready(function() {
 window.App = new window.Routers.Package;
 Backbone.history.start();              

   $('#wrapper').delegate("button", "click", function(ev){
      alert ($(ev.target).id); 
   });
});

以下是我的观点，

window.Views.Actions = Backbone.View.extend({
tag: 'nav',

initialize: function() {
    _.bindAll(this, 'render', 'gotoNode');


},

render:function(){
    this.model.each(function(action){
        var buttonTemplate = "<button id = '"  + action.toNodeId + "'>" + action.name + "     </button>";
        $(this.el).append(buttonTemplate)
    }, this);


    console.log(this.el); // when I do this I get `<div><button id = 'something'></button></div>`
    return this;
},

   events:{
      "click button":"gotoNode"  
   },

   gotoNode:function() {
     alert("inside gotoNode");  
   },

});

所以这里的第一个问题是为什么我未定义为for id？其次，如何让骨干调用gotoNode()方法？

Answer 1

jQuery函数$返回一个jQuery对象，而不是DOMElement。如果要访问该元素的ID，则需要使用$(ev.target).attr("id")。此外，您不应该使用ev.target。它返回被单击的DOMElement，它可以是按钮，但它也可以是按钮内的TextNode。在第二种情况下，您将没有id属性。您需要使用的是$(this).attr("id")。

对于gotoNode部分，如果您在视图中进行事件绑定（在初始化方法中移动委托调用），那将更有意义。

initialize : function () {
     _.bindAll(this, 'render', 'gotoNode');

    var self = this;

    $('#wrapper').delegate("button", "click", function(ev){
        self.gotoNode();
    });
}

Answer 2

如果您希望gotoNode()方法有效，则必须将按钮放入this.el。只有那时代表才会工作。

event.target.id为undefined？使用backbone.js创建动态按钮

2 个答案: