2

私はSelect2を使用しています。これはうまく機能します。ただし、以下のコードを使用して新しい動的select2ドロップダウンを作成していますが、クリックしても反応/開きません。

var relationshipcounter = 0;

$('#AddMoreRelationships').click(function () {
    var $relationship = $('.relationship'); // div containing select2 dropdown
    var $clone = $relationship.eq(0).clone();
    $clone[0].id = 'id_' + ++relationshipcounter;
    $relationship.eq(-1).after($clone);

    $relationship.find('select').trigger('change'); // not working
});

スクリーンショット：

ここに画像の説明を入力してください

JSFIDDLE：

http://jsfiddle.net/pHSdP/133/

4

5 に答える 5

3

私はこの正確な問題を抱えていました。もちろん、最初に試したのはデータを含むディープコピーでした:

el.clone(true,true);

うまくいきませんでした。代わりに、私が見つけた最良の方法は次のとおりです。

el=other_el.clone()_etc; // cloning the old row
el.find('.select2-container').remove();
el.find('select').select2({width: 268});

elこれらのスニペットの両方で、Select2 要素divを含む行です。select

基本的に、2 番目のスニペットで行うことは、常に のクラスを持つ「古い」select2 を削除し、新しい行内で.select2-container見つかったすべての要素で再作成することです。select

于 2013-04-17T14:03:56.963 に答える
2

イベントとデータもコピーするcloneには、引数を指定して呼び出す必要があります。trueそれ以外の場合、要素のみが複製され、それにバインドされているイベントは複製されません。

$relationship.eq(0).clone(true);

ドキュメント: http://api.jquery.com/clone/

于 2013-02-28T13:48:20.470 に答える
2

わかりましたので、問題は解決しました、フィドル:

http://jsfiddle.net/WrSxV/1/

// add another select2
var counter = 0;
$('#addmore').click(function(){
    var $relationship = $('.relationship');
    var $clone = $("#RelationshipType").clone();
    $clone[0].id = 'id_' + ++counter;
    $clone.show();
    $relationship.eq(-1).after($clone);
    $clone.select2({ "width" : "200px" });// convert normal select to select2

    //$('body').select2().on('change', 'select', function(){
      //  alert(this.id);
    //}).trigger('change');

    return false;
});
于 2013-03-01T10:49:37.640 に答える
0

.on動的に挿入された要素を次のようなイベントにバインドするために使用します

$('body').on('click','#AddMoreRelationships',function () {
});
于 2013-02-28T13:48:47.927 に答える
0

オブジェクトのクローンを作成した後、em のイベントを再割り当てする必要があります。

var $clone = $relationship.eq(0).clone();
$clone.on("click", function_name);
于 2013-02-28T13:51:19.930 に答える