この質問Cloning a bootstrap element with an event listener私は、ブートストラップ提供のイベントリスナーをコピーせずに要素をクローンする方法を尋ねました。そして答えはtrue
をclone()
コマンドに渡さないことです。ブートストラップ要素をクローンするが、すべてのイベントリスナーをクローン化しない
私の知る限りでは、私の問題はそれより少し複雑です。私が実際に持っているのは、いくつかのボタンを含む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を変更し、新しいものを自動的に配置するためのブートストラップを取得するときに、イベントハンドラを削除する方法です。
これは実行可能コードではないことをお詫び申し上げます。流線形の実行可能な例を引き出すのは難しいほどのコンテキストがある。