1. ホーム
  2. jquery

[解決済み] Jquery select change が起動しない

2022-02-18 03:27:59

質問

セレクトボックスが変更されたときにキャプチャする必要があるのですが、簡単なはずです。

    $('#multiid').change(function(){
    alert('Change Happened');
});

しかし、うまくいきません。セレクトボックスがドキュメントレディに存在せず、必要なときだけ作られることが問題なのではないかと思い、HTMLで空のセレクトボックスを作り、テストとしてコードを入力しましたが、これもうまくいきませんでした。

function buildmulti(id,name,price) {
    // build action items for action bar
    var optlist = $('<select></select>').attr('id', 'multiid').attr('name', 'multiid');
    optlist.append('<option value="0">Select Size</option>');
    $.each(option, function(index, val) {
        if(val.prodID *1  == id * 1) {
            v = val.ID;
            fprice = price * 1 + val.pricechange * 1;
            t = name + ' - ' + val.variation +  ' - ' + currency + (fprice).toFixed(2);
            optlist.append('<option value="' + v + '">' + t + '</option>');
        }
    })
    $('#addbasket').append(optlist);
};

というのは、おそらく別のブラケットで場所がずれているのでしょうが、それが見つかりません。

どのように解決するのですか?

試す

 $(document).on('change','#multiid',function(){
    alert('Change Happened');
});

セレクトボックスはコードから生成されるため、セレクトボックスには イベントデリゲーション の代わりに $(document) を使用すると、最も近い親要素を持つことができます。

または

$(document.body).on('change','#multiid',function(){
    alert('Change Happened');
});

更新しました。

2つ目は問題なく動作しますが、動作させるためにはもう一つセレクタを変更する必要があります。

$('#addbasket').on('change','#multiid',function(){
    alert('Change Happened');
});

理想的には $("#addbasket") というのは、最も近い親要素である [ 上記で述べたように ].