2016-08-01 16 views
0

この質問Cloning a bootstrap element with an event listener私は、ブートストラップ提供のイベントリスナーをコピーせずに要素をクローンする方法を尋ねました。そして答えはtrueclone()コマンドに渡さないことです。ブートストラップ要素をクローンするが、すべてのイベントリスナーをクローン化しない

私の知る限りでは、私の問題はそれより少し複雑です。私が実際に持っているのは、いくつかのボタンを含むdivです。その1つは関連divの展開/折りたたみを制御し、その他はjavascript内で複雑なクリックリスナによって提供される他の特殊な機能を提供します。私は他のボタンでclick()リスナーを保持する必要があります。 true引数なしでclone()を呼び出すと、それらのリスナーもすべて失われます。

リスナーでclone(true)の方法がありますが、展開/縮小ボタンからブートストラップで提供された複製されたリスナーを削除し、IDを一意のIDに変更してから何とかしても、リスナーは、クローンされたdivの新しい変更されたIDに基づいて再度推測します)。

私はさまざまな折りたたみ可能なオブジェクトを作成し、それらの一部を別のタブペインに複製しています。

私のコードの簡易版:

<div class="container"> 
    <button aria-expanded="false" data-target="#collapsible_obj_0" data-toggle="collapse" class="btn btn-link collapsed">click here</button> 
    <div style="height: 0px;" aria-expanded="false" id="collapsible_obj_0" class="collapse"> 
    <span>foo</span> 
    <button class="btn bar-btn">bar</button> 
    </div> 
</div> 

とJavaScriptからの抜粋:

$("#collapsible-obj-0 .bar-btn").click(function() { 
    // do a bunch of stuff 
    }); 

    this.collapsibleObjCounter = 15; // really this will be one more than the number of exiting objects 

    // objectContainer is the jquery object representing the top level div (passed into this method) 

    var header = objectContainer.clone(true); // or not true, that is the question.... 
    var counter = this.collapsibleObjCounter++; 
    var collapseId = "collapsible_obj_" + counter; 
    header.find(".collapse").attr("id", collapseId); 
    header.find("button[data-toggle='collapse']").attr("data-target", "#"+collapseId); 

私はここに必要なものは、「ここをクリック」ボタンのイベントハンドラを削除することであり、ブートストラップで、変更されたIDに基づいて新しいものを追加してください。 trueフラグを付けずにクローンを作成すると正しく動作するように見えますが、 "bar"ボタンのclick()機能は失われます。実際には、機能を維持する必要のある「バー」ボタンがたくさんあります。手動でclick()ビヘイビアをクローンバージョンにコピーするのは面倒ですが、可能です。しかし、理想的には、私が望むのは、折りたたみボタンと関連付けられたdivのIDを変更し、新しいものを自動的に配置するためのブートストラップを取得するときに、イベントハンドラを削除する方法です。

これは実行可能コードではないことをお詫び申し上げます。流線形の実行可能な例を引き出すのは難しいほどのコンテキストがある。

答えて

0

これらのイベントハンドラを.on()メソッドを使用して委任しようとする必要があります。

$('body').on('click', '.bar-btn', someFunc); 

委任されたハンドラが追加されたJsfiddleが追加されました。イベントの代表団の

利点:

  • あなたはそれのように、後にDOMに動的に追加されたノードのためにうまく動作するすべての
  • でこれらのハンドラのクローンを作成/コピーする必要はありませんよく(泡立ちを介して)。

ので、上記のコードは、それがobjectContainerのインスタンスのクローンを作成し、貼り付けた後であっても、バー-BTNのクリックにsomeFuncイベントハンドラをトリガします。

詳細については、event delegationbubblingについて、これらのリンクをチェックしてください。

関連する問題