骨干JS事件不会对动态添加元素

触发我有一个骨干视图呈现外部把手模板（* .hbs）。该视图在实例化的另一视图中呈现，实质上：骨干JS事件不会对动态添加元素

MainAppView 
render: function() { 
//load main layout 
var childView = new ChildView(); 
} 


ChildView 

render: function() { 
$('body').append(this.template(data)); 
} 

template: 

<ul id="someId"> 
<li><a> {{data}}</a></li> 
</ul> 

and an events hash in the childView like this: 

events: { 
    'click #someId li a' : 'doSomething' 
} 

doSomething: function() { event.preventDefault(); console.log("exit");}

这就是它的要义。问题是，选择器#someId li a不起作用，它无法执行doSomething

我使用jQuery验证选择器，通过绑定Chrome控制台中的函数doSomething，可以正常工作。

我想我知道它为什么不能在Backbone中工作，但HBS模板在ChildView实例化后触发delegateEvents后呈现，这意味着我没有使用选择器的元素，因此没有任何东西界。我尝试了一个身体前缀，但是，也没有工作。

我需要做什么？

来源

2015-11-03 Parijat Kalia

'$（ '身体'）追加（this.template（数据））;'只有instanciating'ChildView'外观奇。初始化之后，事件通过'delegateEvents（）'方法建立。 DOM操作，如'空（）'或'HTML（）'上的父节点调用时可能会删除这些侦听器。请添加呈现'MainAppView'的方式。检查是否有之前'使（）的任何这些调用的''荷兰国际集团的ChildView'首次或再次 –

你ChildView渲染方法渲染视图的内容进入体内，而不是内部本身。你应该呈现这个样子：

render: function() { 
    this.$el.append(this.template(data)); 
    $('body').append(this.$el); 
}

的原因doSomething功能没有被称为是因为在骨干事件都被委托给视图（view.el）的根元素。以下是基本上是骨干，是引擎盖下做：

'click #someId li a' : 'doSomething'

成为

view.$el.on('click', '#someId li a', view.doSomething);

如果你去和模板的内容直接追加到body而不是视图的EL，事件绝不会被视图所捕获，因此不会调用回调。

来源

2015-11-03 23:27:04

我觉得DoSomething的功能缺少参数event这样添加参数：

doSomething: function(e) { e.preventDefault(); console.log("exit");}

来源

2015-11-04 05:27:54

@TJ THX编辑我是第一个写 –

你是认真的，你不需要在事件参数来传递到功能 –

@ParijatKalia你怎么做。它只适用于Chrome（也许是IE），因为它们有一个名为event的全局变量，用于存储最后一个事件。如果你试图在Firefox中运行这段代码，它会抛出错误，'事件'是未定义的。 –

骨干JS事件不会对动态添加元素

回答

相关问题