1

http://jsfiddle.net/xuAQv/ <-- JsFiddle の悪いコードへのリンク。

そこで、従来のフォームの選択ボックスを Twitter のブートストラップ スタイルのバージョンに変換するこのコードを見つけました。基本的に、選択を非表示にし、ブートストラップの css / js を使用して選択ボックスの html を作成します。

http://blog.iamjamoy.com/convert-select-boxes-to-a-fancy-html-dropdown プラグインを少しカスタマイズして、ドロップダウンの外観を変更しました。

私が今抱えている問題は、 $("#mySelect").change(function(){}); 発火しなくなりました。.live と .on を追加しようとしましたが、うまくいきませんでした。

プラグインを変更する必要がありますか? これがプラグインの私のコードです..

/*!
 * Convert <select> elements to Dropdown Group
 *
 * Author: John Rocela 2012 <me@iamjamoy.com>
 * Customized: Frank B 3/2012
 */
jQuery(function ($) {
    $('select').each(function (i, e) {
        if (!($(e).data('convert') == 'no')) {
            //get some initial data...
            xSelect = $(e).attr('id')
            xLabel = $("#" + xSelect + " option:selected").text();
            xClass = $(e).data('class')
            $(e).hide().wrap('<div class="btn-group" id="select-group-' + i + '" />');
            var select = $('#select-group-' + i);
            select.html('<a class="btn dropdown-toggle ' + xClass + '" data-toggle="dropdown" href="javascript:;">' + xLabel + ' <span class="caret"></span></a><ul class="dropdown-menu"></ul><input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" />');
            $(e).find('option').each(function (o, q) {
                select.find('.dropdown-menu').append('<li><a href="javascript:;" data-title="' + $(q).text() + '" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>');
                if ($(q).attr('selected')) select.find('.dropdown-menu li:eq(' + o + ')').click();
            });
            select.find('.dropdown-menu a').click(function () {
                select.find('input[type=hidden]').live().val($(this).data('value')).change();
                select.find('.btn:eq(0)').html($(this).text() + ' <span class="caret"></span>');
            });
        }
    });
});
4

1 に答える 1

2

コードで実際に何が起こっているかを見ると、選択が非表示の入力に置き換えられています。値を変更すると、それがchange()呼び出されます。イベント委任を使用する必要があります。このようなもの：

$("<parent selector>").on("change","#mySelect", function(){});

<parent selector>置換されていない選択の親に一致するセレクターはどこにありますか。必要に応じて を指定することもできますがdocument、理想的にはツリーのできるだけ下に配置することをお勧めします。

あなたliveがうまくいかなかった理由は、次のようになっているはずだからです:

$("#mySelect").live("change", function(){});

live最新の jquery を使用している場合は使用しないでくださいon。

編集:フィドルを更新しました: http://jsfiddle.net/xuAQv/2/

于 2012-04-13T13:31:12.357 に答える