Javascript 主干视图委派活动获胜'；行不通

我在让delegateEvents工作方面遇到了问题

以下是我的视图定义：

//the "." in Mustache templating simply means it will iterate through an array of JSON objects
var locationViewTemplate = '<div class="ui-content-panel ui-content-panelLocationView ui-corner-all "><div><ul class="ui-content-list">' +
'{{#.}}' +
'<li><span>{{Name}}</span> <a href="#">edit</a></li>' +
'{{/.}}' +
'{{^.}}' +
'<li>No Locations Defined</li>' +
'{{/.}}' +
'</ul></div><input type="text" id="locationName"> <input class="locationAdd" type="button" title="Add Location" id="locationAdd" value="Add"></div>';


//module: Location
(function(Location) {
//define Model
Location.LocationModel = Backbone.Model.extend({
    initialize: function () {
        this.entityName = 'location';
    }
});

//define collection
Location.LocationCollection = Backbone.Collection.extend({
    model: Location.LocationModel,
    initialize: function () {
        this.entityName = 'location';
    },
    getAllLocations: function () {
        this.functionName = 'GetAll';
        this.fetch();
    }
});

//define View(s)
Location.LocationListView = Backbone.View.extend({
    events: {
        'click #locationAdd': 'addClickEvent'
    },
    render: function () {
        $(this.el).html(Mustache.render(locationViewTemplate, this.collection.toJSON()));
        //this.delegateEvents();

        return this;
    },
    initialize: function() {
        this.render();
        //this.delegateEvents();
    },
    addClickEvent: function (){
        alert('this is the function');
    }

});


})(vHub.module('location'));

---

我在stackOverflow上找到了一些建议，并尝试了其中的一些建议。但迄今为止还没有一个成功。任何帮助都将不胜感激。谢谢

我从你发布的代码中尽我所能，这是一个很好的例子。如果您想发布更多代码，我可能会帮助调试。正如Elf提到的，无需显式调用

delegateEvents（）

我从您发布的代码中获取了我所能得到的，这是一个很好的示例。如果您想发布更多代码，我可能会帮助调试。正如Elf所提到的，不需要显式调用

delegateEvents（）

有趣的是，您应该问。。。我刚刚在我正在开发的一个应用程序中解决了一个类似的问题，瞧，这是Backbone.js标签下的首要问题

不确定我们是否遇到了相同的问题，但我的问题是，我试图连接到的按钮实际上超出了我的视图范围。主干视图有一个

el

属性，而

click

事件仅附加到该根元素的子元素

在我的应用程序中，我有一个列表视图，它的根元素是

ul

。我的按钮和列表都位于

div

标记内：

<div>
    <ul id="my-list-view"></ul>
    <button id="save">Save</button>
</div>

---

这不是实现这一点的主要方法——您希望像在代码中那样使用

事件
散列。但您可能需要将集合视图嵌套在控件级视图中。
有趣的是，您应该问。。。我刚刚在我正在开发的一个应用程序中解决了一个类似的问题，瞧，这是Backbone.js标签下的首要问题

不确定我们是否遇到了相同的问题，但我的问题是，我试图连接到的按钮实际上超出了我的视图范围。主干视图有一个
el
属性，而
click
事件仅附加到该根元素的子元素

在我的应用程序中，我有一个列表视图，它的根元素是
ul
。我的按钮和列表都位于
div
标记内：

<div>
    <ul id="my-list-view"></ul>
    <button id="save">Save</button>
</div>

这不是实现这一点的主要方法——您希望像在代码中那样使用
事件
散列。但是您可能需要将集合视图嵌套在控件级视图中。
为什么要调用
delegateEvents
？stock jQuery
delegate
函数处理将来的插入，而不需要重新调用。这是一个好问题。我可以尝试一下，正如计划B所说，“delegateEvents”确实使用了jQuery的“delegate”函数，所以理论上，使用“delegate”应该是一样的。不，你误解了。初始化视图时，
delegateEvents
将自动调用。除非你完全破坏了这个元素，并出于某种奇怪的原因重新构建了它，否则你不需要自己称呼它。哦，我明白你的意思了。嗯，如果不调用
delegateEvents
，它也无法工作。我不知道是如何定义
事件
属性还是什么。我有点被难住了-/@埃尔夫斯滕伯格：如果你这样做了，你应该打电话。你为什么要打电话给
delegateEvents
？stock jQuery
delegate
函数处理将来的插入，而不需要重新调用。这是一个好问题。我可以尝试一下，正如计划B所说，“delegateEvents”确实使用了jQuery的“delegate”函数，所以理论上，使用“delegate”应该是一样的。不，你误解了。初始化视图时，
delegateEvents
将自动调用。除非你完全破坏了这个元素，并出于某种奇怪的原因重新构建了它，否则你不需要自己称呼它。哦，我明白你的意思了。嗯，如果不调用
delegateEvents
，它也无法工作。我不知道是如何定义
事件
属性还是什么。我有点被难住了-/@埃尔夫斯滕伯格：如果你这么做了，你应该打电话。谢谢@tomswift！我真的很欣赏这个例子。我看了你的例子，看起来我做的都是对的。我在原始帖子中更新了我的代码示例，使其更加完整，基本上是复制了我的JS文件。谢谢@tomswift！我真的很欣赏这个例子。我看了你的例子，看起来我做的都是对的。我在原始帖子中更新了我的代码示例，使其更加完整，基本上是复制了我的JS文件。谢谢！我以为我把一切都控制在范围之内。我在度假，所以我现在没有代码。一旦我回到办公室，我会仔细看一看，如果真的是这样的话，我会把它标记为已回答。所以，我有点让它起作用了。我认为存在一些范围问题。但是我在让
.on（）
（甚至没有backbone.js）工作时遇到了问题，除非选择器存在（据我所知，您应该能够在jquery 1.7及更高版本中使用它）。这就是有效的方法，尽管我并不完全满意：
$（'content'）.on（'click'，'#locationAdd'，function（）{alert（'what the…'）；}）
其中
#content
是我的HTML页面上现有的div标记。您是否有可能在JSFIDLE中重新生成该标记或创建GitHub重新生成？我很确定我们可以为您解决这个问题，但在这里很难理解$（'#content'）.html（$（lv.el）.html（）），但当它将其更改为以下内容时：
var lv=new Location.LocationListView（{collection:lc，el:$（'#content'）}）一切正常运行。当您让主干网创建默认的
div
时，似乎没有正确设置事件，或者我没有正确使用该div或其他什么。但是，当我在实例化el时指定它时，一切都按预期进行汉克斯！我以为我把一切都控制在范围之内。我在度假，所以我没有时间
<div>
    <ul id="my-list-view"></ul>
    <button id="save">Save</button>
</div>

initialize: function() {
    $('#locationAdd').click(addClickEvent);
    this.render();
}