第一次點擊跳過骨幹視圖中的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(); 
    } 
); 
}