Backbone.js 当不再在同一视图的范围内时，在渲染后删除模板

我在导航栏中有一个链接（带有class.story），如果单击该链接，会将一个故事模板呈现到画布div中，以向用户提供信息。我想给用户在阅读信息后删除模板的选项，但是，我不能在模板中的删除“x”上设置单击事件

我想我知道问题所在。我的StoryView el是

，因此我可以对其中的任何内容设置事件，但由于它呈现到另一个未附加到该视图的div中，因此我无法将其从该视图中删除

这是一把小提琴，显示了问题所在。更新，我把小提琴放错了。现在修好了

Html

看法

var StoryView=Backbone.View.extend({
el:$（“#故事”），
活动：{
'单击.story'：'渲染'，
'单击。删除'：'测试'
},
初始化：函数（）{
},
render:function（）{
var template=$（“#故事_模板”）.html（）；
this.template=\模板（模板）；
$（'#canvas_id'）.html（this.template（））；
},
测试：函数（）{
警告（“删除”）；
},
删除：函数（）{
警报（“如何删除模板”）；
}
});
var story_view=新故事视图（）；

模板：

<div id="story">
   <a href="#" class="story">click this story link to render into canvas_id but how to set event to remove?</a>
</div>

<div id="canvas_id"></div>

<script id="story_template" type="text/underscore">
"I want to make the x
    after this story clickable to remove the template
    but since it's not within the #story div (which
    is just a navbar in my real app), it's not working"
<span class="delete">X</span>



</script>

“我想做x
本故事结束后，单击可删除模板
但由于它不在#story div（其中
只是我真正的应用程序中的导航栏），它不起作用“
X

要理解为什么只能在视图的el上侦听事件，首先需要了解backbone.js如何侦听事件

在backbone.js中，事件（使用jQuery或Zepto）被添加到视图的

el

。在您的情况下，视图的

el

是

#story

不会触发删除事件

您可以做的是，当您单击渲染模板时，您可以使用重新分配视图的el，该el还将把视图委派的事件移动（重新委派）到新的

el

（（如上所述）

比如说

   render: function(){
     var template = $('#story_template').html();
    this.template = _.template(template);
    $('#canvas_id').html(this.template());
       this.setElement($('#canvas_id'));
   },

在删除事件中，您可以将

el

重新分配回

#story

元素

---

更新

谢谢你的提琴和解释。@muistooshort你的权利，它是多余的，我相应地修改了我的anwser。

<div id="story">
   <a href="#" class="story">click this story link to render into canvas_id but how to set event to remove?</a>
</div>

<div id="canvas_id"></div>

<script id="story_template" type="text/underscore">
"I want to make the x
    after this story clickable to remove the template
    but since it's not within the #story div (which
    is just a navbar in my real app), it's not working"
<span class="delete">X</span>



</script>

   render: function(){
     var template = $('#story_template').html();
    this.template = _.template(template);
    $('#canvas_id').html(this.template());
       this.setElement($('#canvas_id'));
   },