javascript 主干点击事件未在动态视图上触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18477539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone click event not firing on dynamic view
提问by Drew Bartlett
I have a backbone view that creates a new div for each model that is passed into it. However, I cannot get any sort of events to fire (click a.change-status) on the view and I assume it's because the elements inside of it are also generated from a template. Please let me know if there's some way around this.
我有一个主干视图，它为传递给它的每个模型创建一个新的 div。但是，我无法在视图上触发任何类型的事件（单击 a.change-status），我认为这是因为其中的元素也是从模板生成的。请让我知道是否有办法解决这个问题。
var videoDivView = Backbone.View.extend({
el: '<div class="vendor-video" />',
initialize: function(){
_.bindAll(this);
this.render();
this.model.on('change:published', this.enableSaveButton);
},
events: {
'click a.change-status' : 'changeVideoStatus'
},
template: video_tmpl,
render: function(){
this.$el.attr("id", 'video-'+this.model.id);
this.$el.html(this.template(this.model.toJSON()));
this.$el.data('status', video_statuses[this.model.get('published')]);
},
changeVideoStatus: function(e) {
console.log(this.model);
return false;
},
enableSaveButton: function() {
$('#save-changes').removeClass('disabled').removeAttr('disabled');
}
});
an example template would look like:
示例模板如下所示：
<script id="single-video-tmpl" type="text/x-jquery-tmpl">
<div>
<div class="video-info">
<span class="video-title"><%=video_title%></span>
<div class="bottom-info">
<a href="#<%=id%>" class="change-status"></a>
</div>
</div>
</div>
</script>
采纳答案by dombesz
There are some things that might be the cause of the problem.
有些事情可能是导致问题的原因。
First of all, your eldeclaration seems to be suspect. If you want a div with that class you just have to define the classNameattribute since the default for backbone views is div.
首先，你的el声明似乎是可疑的。如果您想要一个具有该类的 div，您只需要定义该className属性，因为主干视图的默认值是div.
Instead of: el: '<div class="vendor-video" />'
代替： el: '<div class="vendor-video" />'
just use: className: 'vendor-video'
只需使用： className: 'vendor-video'
I don't see any details about your view initialization methods but the best practice is to initialize a view and then render it to the container:
我没有看到有关您的视图初始化方法的任何详细信息，但最佳做法是初始化视图，然后将其呈现给容器：
var yourVideoDivView = new videoDivView({model: model});
$("#your-video-container").html(yourVideoDivView.render().el)
also to get the last line work you have to return this;on your render method.
还要return this;在渲染方法上完成最后一行工作。
render: function(){
...
return this;
}
About using this.delegateEvents(), you should call this function after your view is already in the DOMotherwise it makes no sense. ie:
关于 using this.delegateEvents()，你应该在你的视图已经存在之后调用这个函数，DOM否则它没有意义。IE：
$("#your-video-container").html(yourVideoDivView.render().el)
yourVideoDivView.delegateEvents();
delegateEvents()will makes your view events alive again.
delegateEvents()将使您的视图事件再次活跃起来。
回答by kikuchiyo
Try a this.delegateEvents()after you render the new content.
this.delegateEvents()在呈现新内容后尝试。
回答by Vitaliy Trush
I had a similar problem.
You can resolve this problem in two steps.
- Create a tagNamein view
- Append your template in this.$el
That's all.
And it work without this.delegateEvents()
我有一个类似的问题。您可以通过两个步骤来解决此问题。
- 创建一个tagName视图
- 将您的模板附加到this.$el
这一切中。它没有工作this.delegateEvents()
回答by Aravinda VP
The issue I observed with tagName and appending using this.$el is, the event listener failed to attach the event for the last element created with selected tagName. But, the problem got solved when using this.delegateEvents() after appending the elements to DOM.
我观察到的问题是使用 tagName 并使用 this.$el 附加，事件侦听器未能为使用选定 tagName 创建的最后一个元素附加事件。但是，在将元素附加到 DOM 后使用 this.delegateEvents() 时，问题得到了解决。
