Event.target.id未定义?使用backbone.js创建动态按钮

event.target.id as undefined ? Creating dynamic buttons using backbone.js

本文关键字：js 创建 动态 按钮 backbone 使用 target id 未定义 Event      更新时间：2023-09-26

我有一个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");  
   },
});

所以这里的第一个问题是为什么我得到未定义为一个id ?其次，如何使主干调用gotoNode()方法?

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();
    });
}

如果你想让gotoNode()方法工作，你必须把你的按钮放在this.el。

相关文章：