0

ドロップダウンメニューから特定の値が選択された場合にのみ表示したい div があります (この場合はcustom-css)

フィドル（http://jsfiddle.net/obmerk99/8xnzh/1/）では問題なく動作します...

jQuery(document).ready(function() {

       jQuery("#k99-custom-1").change(function () {
         jQuery("#k99-custom-1 option:selected").each(function ()
        {
            if( jQuery(this).attr("value") == "custom-css")
            {
                jQuery("#customcss").show();
            }
            else
            {
                jQuery("#customcss").hide();
            }
        });
    }).change();
});

しかし、実際のページでは、選択ドロップダウンは実際には「オプションの追加」ボタンで動的に生成されるため、特定の（最初の）選択はページの読み込み時に存在しません（ドキュメントの準備ができています）。これが理由だと思いますうまくいかない ..

ここで動作中の完全なものを参照してください（動作していません）：http://jsfiddle.net/obmerk99/ZcAzy/1/

「custom-css」値が選択されている場合に div を表示するには、何が間違っていますか? （現在、最初のもの（または2番目）でのみ機能するように設定されています-しかし、追加されたすべての選択リストで機能するようにすることは素晴らしいことです..）

4

2 に答える 2

3

delegation次のようにを使用してみてください。

jQuery(function() {
    //  Here, `.on` is used in its `delegate` form, where it asigns an event to any
    //    element matching the selector
    //    regardless when it was added to the DOM
    jQuery(document).on('change', "[id^='k99-custom-']", function(e) {
        jQuery("[id^='k99-custom-'] option:selected").each(function(i) {
            if (jQuery(this).attr("value") == "custom-css") {
                jQuery("#customcss").show();
            }
            else {
                jQuery("#customcss").hide();
            }
        });
    })
})

別の回答へのコメントで気づいたのですが、このようなことを試しました。あなたが間違っていたのは、eventof セレクター[id^='k99-custom-']をに委任した[id^='k99-custom-']ことです。これは、ご覧のとおり、それ自体です。委任するには、私の例のように、親要素またはdocumentそれ自体に割り当てる必要があります。最も一般的な使用法は、単に使用することです$(document).on(...

例

その詳細.delegateとその.on形を知ろう！

于 2013-07-02T20:16:13.930 に答える