1

ユーザーが（html）リストの製品を選択できるWebサイトを開発しています。このリストは、javascript 関数 (getOptionsForm()) によって動的に作成されます (作成する必要があります)。ユーザーがリストで製品を選択すると、関連する製品の詳細がボックスに表示される必要があります。ユーザーが別のボックスを選択すると、さまざまな詳細を表示する必要があります。この部分は私が苦労しているものです。

私の問題は、ボックスに製品詳細情報の表示を実装するのに苦労していることです。どういうわけか jquery .change() が機能せず、その理由は理解していると思いますが、解決方法がわかりません。セレクター (クラス ordertype) が動的に作成されたときに .change() 関数を適用する方法は?

Pls は、以下の単純化されたサンプル コードを参照してください。

$(document).ready(function(){

    var getOptionsForm = function() {
        var form = $('<select class="ordertype"> <option value='1'> prod1 </option><option  value='2'> prod2 </option> </select>');
    }

    var form = getOptionsForm();

    $('#wrapper').append(form);

    $(".ordertype").focus(function () {
        // Store the current value on focus and on change
        previous1 = this.value; //old select value
    }).change(function() {
        $('#prod-details').html('show something');
        previous1 = this.value;
    }); 

}); //$(document).ready

<div id="wrapper"> </div>
<div id="prod-details"> </div>
4

3 に答える 3

0

2 つの選択肢があります。

  1. イベント委任（他の回答で前に述べたように、どちらが優れているか）

  2. 要素の作成時および DOM への追加後にイベント リスナーを追加する

    var getOptionsForm = function() { 

    var form = $('<select class="ordertype"> <option value='1'> prod1 </option><option  value='2'> prod2 </option> </select>');
    $('#wrapper').append(form);

    $(".ordertype").focus(function () {
        // Store the current value on focus and on change
        previous1 = this.value; //old select value
    }).change(function() {
        $('#prod-details').html('show something');
        previous1 = this.value;
    });}
}
于 2013-10-10T15:18:46.957 に答える
0

イベント委任、セレクターを DOM の準備ができている要素にバインドします.on()

$("#wrapper").on("change", ".ordertype", function() {
    //do your stuff!
});
于 2013-10-10T15:11:26.177 に答える
0

イベント委譲で jQuery on()を使用する必要があります。動的に追加された要素の親にイベントを委譲できます。

$('#wrapper').on('change', '.ordertype', function() {    
    $('#prod-details').html('show something');
    previous1 = this.value;
});

委任されたイベント

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります (参照) 。

于 2013-10-10T15:11:57.593 に答える