バックボーンビューのJqueryイベントは、最初のクリックでスキップされます。

Question

divを表示および非表示にするトグルイベントがあり、バックボーンビュー内に接続され、イベントデリゲート経由で呼び出されます。リンクの最初のクリックで、toggle（）はスキップされます。 2番目と3番目のクリックでtoggle（）が期待通りに呼び出されます。

トグルイベントを最初にクリックして取得する方法はありますか？

​​

Answer 1

jQueryのトグルは、それが動作する理由です、あなたがトグルを処理するためのイベントがバインドされますそれをクリックしますが、それはまだバインドされていなかったと、何も起こりませんようにトリガされません初めてので、クリックトグル動作をバインドします2回目のクリックでもう1つの問題は、クリックするたびにイベントを何度も繰り返しバインドするたびに、イベントが複数回トリガーされ、エラーを追跡するためにさまざまな種類のハードを生成できること+パフォーマンスが低下することです。

テンプレートをレンダリングした後でレンダリングメソッドでトグルイベントをバインドするか、ヘルパーメソッドbindToggleなどを作成して、レンダリングメソッドからレンダリングメソッドを呼び出す必要があることを修正するには、テンプレートをレンダリングしてください。

編集：といくつかのヒント

• それは、我々は、大文字とクラス/コンストラクタの小文字と名前を持つメソッドの名前を開始広く受け入れ標準だ - これは他のプログラマのために混乱するかもしれません。それは空にしてから
• あなたのHTML/DOMノードを追加しますjqueryのhtmlと同等であるあなたが要素にイベントをバインドする場合は、もう一度それのためにあなたを照会する必要はありませんすることができます - あなたは空を使用して、追加
• $(event.target)
• を使用してイベントオブジェクトからそれを得るあなたはあなただけthis.$el
• にアクセスすることにより、jqueryの包まれた要素のキャッシュされたコピーを使用することができる要素を表すjQueryオブジェクトを取得するには$(this.el)を使用する必要はありません0.9+バックボーンを使用している場合、また、照会している要素が現在のビューの要素の子である場合は、バックボーン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(); 
    } 
); 
}