Javascript Backbone.js:Why is'；第二次触发t事件（delegateEvents没有帮助）
这似乎是一个热门话题，然而，在尝试了5个不同答案中的几个解决方案后，我仍然无法正确回答。我有一个简单的表单，将来自两个字段的输入附加到屏幕上。“添加”按钮只工作一次（显示输入的数据），并且不会在第二次单击时触发其事件（我选中了-不再执行事件的Javascript Backbone.js:Why is'；第二次触发t事件（delegateEvents没有帮助）,javascript,events,backbone.js,Javascript,Events,Backbone.js,这似乎是一个热门话题，然而，在尝试了5个不同答案中的几个解决方案后，我仍然无法正确回答。我有一个简单的表单，将来自两个字段的输入附加到屏幕上。“添加”按钮只工作一次（显示输入的数据），并且不会在第二次单击时触发其事件（我选中了-不再执行事件的渲染）。大多数建议的修复都涉及在视图的render方法末尾添加this.delegateEvents（），对我的情况没有任何影响，可能是我做得不对。我认为我所做的只是比其他人必须解决的问题简单 我意识到整件事可以有更好的结构/不同的结构，我只是按照其中一个教
渲染renderthis.delegateEvents（）<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Name List</title>
<link rel="stylesheet" href="name_book.css"/>
</head>
<body>
<div class="container"></div>
<div class="div_people"></div>
<hr>
<div class="div_inputs"></div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<!--template for the inputs-->
<script type="text/template" id="inputs">
Please enter name and city below:<br>
<form id="add_person_form" class="add_person_form">
<div id="div_input_name" class="input_name" style="float:left"><input id="input_name" type="text" /></div>
<div class="div_input_city" style="float:left"><input id="input_city" type="text" /></div>
<a href="#/add" class="input_submit_submit">Add</a>
</form>
</script>
<!--template for the screen output row-->
<script type="text/template" id="person_info">
<span class="person_name"><%= person_name %></span>
<span class=spacer></span>
<span class="person_city"><%= person_city %></span>
<br>
</script>
<script>
//class constructor
var Router = Backbone.Router.extend({
routes: {
'': 'home',
'add': 'addPerson'
}
});
var router = new Router();
var InputsList = Backbone.View.extend({
el: '.div_inputs',
render: function() {
var template = _.template($('#inputs').html(), {});
this.$el.append(template);
}
});
var inputsList = new InputsList();
router.on('route:home', function() {
inputsList.render();
});
var PeopleList = Backbone.View.extend({
el: '.div_people',
render: function() {
var template_person = _.template( $("#person_info").html(), {person_name: $("#input_name").val(), person_city: $("#input_name").val()} );
this.$el.append(template_person);
}
});
var peopleList = new PeopleList();
router.on('route:addPerson', function() {
peopleList.render();
});
Backbone.history.start();
</script>
</body>
</html>
名单
请在下面输入姓名和城市：
//类构造函数
var Router=Backbone.Router.extend({
路线：{
“家”，
“添加”：“添加人”
}
});
var router=新路由器（）；
var InputsList=Backbone.View.extend({
el:“.div_输入”，
render:function（）{
var template=35;.template（$（'#inputs'）.html（），{}）；
此.$el.append（模板）；
}
});
var inputsList=新inputsList（）；
路由器.on（'route:home'，function（）{
inputsList.render（）；
});
var PeopleList=Backbone.View.extend({
el:“div_people”，
render:function（）{
var template_person=u.template（$（“#person_info”）.html（），{person_name:$（“#input_name”）.val（），person_city:$（“#input_name”）.val（）；
此.$el.append（模板\个人）；
}
});
var peopleList=new peopleList（）；
on（'route:addPerson'，function（））{
peopleList.render（）；
});
Backbone.history.start（）；
#/addBackbone.View.extend({
events : {
"click .input_submit_submit" : "myCallbackOnClick"
},
myCallbackOnClick : function(ev) {
// <a> i was clicked
ev.preventDefault();
this.someOptionToRenderDifferently = true;
peopleList.render();
}
});
Backbone.View.extend({
活动：{
“单击。输入\提交\提交”：“myCallbackOnClick”
},
myCallbackOnClick:函数（ev）{
//我被点击了
ev.preventDefault（）；
this.someoptionRenderDifferentily=true；
peopleList.render（）；
}
});
peopleList.render（）