web-dev-qa-db-ja.com

val（）を使用してselectの値を設定したときにjquery changeイベントがトリガーされないのはなぜですか？

change()イベントハンドラのロジックは、値がval()によって設定されているときには実行されませんが、ユーザーがマウスで値を選択したときには実行されます。どうしてこれなの？

<select id="single">
    <option>Single</option>
    <option>Single2</option>
</select>

<script>
    $(function() {
        $(":input#single").change(function() {
           /* Logic here does not execute when val() is used */
        });
    });

    $("#single").val("Single2");
</script>
jqueryhtmlselectinput
362
Eric Belair

なぜならchangeイベントはJavaScriptコードではなくユーザーによって開始される実際のブラウザイベントを必要とするからです。

代わりにこれを行ってください。

$("#single").val("Single2").trigger('change');

または

$("#single").val("Single2").change();
569
user113716

trigger() でchangeイベントを手動で起動できると思います。

$("#single").val("Single2").trigger('change');

なぜそれが自動的に起動しないのか、私にはわかりません。

44
David Thomas

Val（）の後にこのコードを追加するとうまくいくようです。

$(":input#single").trigger('change');
9
Eric Belair

私はAPIの中で読むことができる限り。このイベントは、ユーザーがオプションをクリックしたときにのみ発生します。

http://api.jquery.com/change/

選択ボックス、チェックボックス、およびラジオボタンの場合、ユーザーがマウスで選択するとイベントがすぐに発生しますが、他の要素タイプの場合、イベントは要素がフォーカスを失うまで延期されます。

8
Marnix

カスタム関数を簡単に追加して、値を変更すると変更もトリガーされるようにしたいときに呼び出します。

$.fn.valAndTrigger = function (element) {
    return $(this).val(element).trigger('change');
}

そして

$("#sample").valAndTirgger("NewValue");

または、valが呼び出されたときに常に変更を呼び出すようにval関数をオーバーライドすることもできます。

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        this.trigger("change");
        return originalVal.call(this, value);
    };
})(jQuery);

サンプル http://jsfiddle.net/r60bfkub/

6
Alireza Fattahi

デフォルトの変更イベントと混同したくない場合は、カスタムイベントを提供できます。

$('input.test').on('value_changed', function(e){
    console.log('value changed to '+$(this).val());
});

値セットでイベントをトリガーするには、次のようにします。

$('input.test').val('I am a new value').trigger('value_changed');
3
codingrhythm

WordpressでCMB2を使用しているときに同じ問題に遭遇し、ファイルアップロードメタボックスのchangeイベントにフックしたいと思いました。

そのため、変更を呼び出すコード（この場合はCMB2スクリプト）を変更できない場合は、以下のコードを使用してください。値が設定された後でトリガーが呼び出されます。それ以外の場合は、変更eventHandlerは機能しますが、値は設定されているものではなく、前のものになります。

これが私が使うコードです：

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        if (arguments.length >= 1) {
            // setter invoked, do processing
            return originalVal.call(this, value).trigger('change');
        }
        //getter invoked do processing
        return originalVal.call(this);
    };
})(jQuery);
2
user2075039

選択オプションをフォームに追加したときにchangeイベントをトリガーしたい場合は、setTimeoutが必要であることがわかりました。そうしないと、jQueryが新しく追加された選択ボックスを選択しません。

window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);
1
Dave Hilditch
$(":input#single").trigger('change');

これは私のスクリプトではうまくいきました。私は3つのコンボを持ち＆chainSelectイベントとバインドします、私は3つの値をurl＆default select allドロップダウンで渡します私はこれを使った

$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');

そして最初のイベントはうまくいった。

1
Prashant Patil