第一次点击跳过骨干视图中的jquery事件

Question

我有一个切换事件用于显示和隐藏div，它被连接到骨干视图内并通过事件代理调用。在第一次点击链接时，toggle（）被跳过。在第二个和第三个点击toggle（）按预期调用。

任何想法如何让第一次点击工作的切换事件？

​​

Answer 1

jQuery的切换结合所以第一次你点击它用于处理切换的情况下获取绑定，但因为它是没有约束，没有任何反应不会被触发的点击触发的行为，这就是为什么它的工作原理在第二次点击。这里的另一个问题是，现在每次你点击你一次又一次地绑定事件，这会随着时间的推移多次触发事件，并且它可以产生所有不同类型的难以跟踪错误，性能将受到影响。

要解决您需要在呈现模板或创建帮助程序方法bindToggle或类似的东西之后绑定呈现方法中的切换事件并在呈现模板之后从render方法调用它。

编辑：和一些技巧

• 这是一个被广泛接受的标准，我们开始用大写类/构造的小写字母和名字的方法名 - 这可能是混乱的其他程序员。
• 您使用空然后追加 - 这是jQuery的html的等效它会空然后追加你的HTML/DOM节点
• ，如果你的事件绑定元素则不需要再次查询它，你可以使用$(event.target)
• 如果您正在使用骨干事件对象得到它0.9+你不需要使用$(this.el)通过访问this.$el
• 得到jQuery对象代表你可以使用jQuery的包裹元素的缓存副本元素同样，如果您查询的元素是当前视图元素的子元素，那么使用主干this.$方法（ this.$('a.docSectionHeading')），因为它会更有效，因为这将只在当前元素的子元素中搜索元素。此外，它还允许您查询尚未添加到文档DOM树中的元素。

ps。并希望bindAll中的**"Expand"**只是一个错误？什么是明星？

固定码：

initialize: function(options) { 
    _.bindAll(this, "render"); 
    this.model.bind("change", this.render);  
    this.model.fetch(); 
}, 

render: function() {  
    var $el = $(this.el); 
    $el.empty(); 
    $el.append(this.template.to_html({ 
    message: this.model.get("message") 
    })); 

    this.bindExpand(); 

    return this; 
}, 

bindExpand: function() { 

    var tempid = "", 
     id = ""; 

    this.$("a.docSectionHeading").toggle(
    function() { 

     tempid = $(this).attr("data-id"); 
     id = tempid.replace(".", "\\."); 

     // show -, hide + 
     $("img#doc_minus_" + id).removeClass(".noShow"); 
     $("img#doc_minus_" + id).show(); 
     $("img#doc_plus_" + id).hide(); 

     // show clicked section. 
     $("#" + id).show(); 
    }, 

    function(){ 
     tempid = $(this).attr("data-id"); 
     id = tempid.replace(".", "\\."); 

     // show -, hide + 
     $("img#doc_minus_" + id).addClass(".noShow"); 
     $("img#doc_minus_" + id).hide(); 
     $("img#doc_plus_" + id).show(); 

     // show clicked section. 
     $("#" + id).hide(); 
    } 
); 
}