jQuery：HTML追加の後にウィジェットを使用する

Question

私は、いくつかのデータベース構成に基づいていくつかの要素（HTML入力）を作成する動的ページを持っています。

たとえば、そのページの最初のHTMLには、コントロール（マスターページのものを除く）がない場合があります。たとえば、ボタンを押した後に作成されます。

divを持ち、.appendを使用してこれらのコントロールを追加した後、（jQuery UI Multiple Select Widgetにあるように）新しく作成されたいくつかのSELECT要素でウィジェットを使用する必要があります。

これは機能しません。

また、私は、このテストをした：

• （私がしようとしているようではない動的に、右のhtmlに）HTMLページのSELECT要素を入れてください。
• $(document).ready関数でウィジェットを起動すると、それは正常に起動し、複数選択可能になります。
• 上記の関数にコメントすると、ボタンクリックでウィジェットを開始するだけで、SELECTが複数選択できなくなります。

お手伝いできますか？いくつかのDOMの事のためですか？この「エンジン」のスニペットは次のとおりです。http://jsfiddle.net/SWyw9/

Answer 1

あなたが求めていることは正確にはわかりません。

それはバインディングの問題のようです。償却されたbind（）または新しい "on"を使用しない限り、存在しない要素（動的要素）にイベントをバインドすることはできません。

body-idのidを持つbodyタグにボタンのクリックを添付します。その後、本体は動的ウィジェットが対応していないときに準備が整っているので、将来のウィジェットボタンのクリックを待ち受けます。

あなたが求めているのかどうかは不明です。

OK私はこれにあなたのフィドルをフォーク： http://jsfiddle.net/TheFiddler/USHc5/4/

はあなたが後に何をしているということですか？

1）種類 2の配列を作成します）BuildHTML 3にそれを渡して）各 5のための小道具 4）スイッチケースを分割）答えることが

Answer 2

その手遅れ新しいHTMLをレンダリングしますが、Iこの答えは将来のデザイナー/開発者に役立つかもしれないと考えました。 jqueryには、イベントハンドラを動的に追加された要素にバインドするdelegate（）関数があります。

このdelegate（）関数を使用することができます。
次のコードスニペットをご覧ください。

// Here you are using delegate to attach mouse over event handler to the existing elements as well as elements which will be added dynamically in future. 
$('#myContainer').delegate('.myDraggableClass', 'mouseenter', function() { 

    var $this = $(this); 
    // Checking whether or not the widget is applied to the element. 
    if(!$this.is(':data(draggable)')) { 

    // As widget is not applied, applying it. 
    $this.draggable({ /* configure draggable here */ }); 
    } 
}); 

コードスニペットは、下のリンクからコピーされています。 詳細は、チェックアウト： http://enterprisejquery.com/2010/07/configuring-ui-widgets-and-interactions-with-live/