web-dev-qa-db-ja.com

jQuery val（）またはJavaScriptで値が変更された場合、入力イベントが機能しない

プログラムで入力フィールドの値を変更すると、inputおよびchangeイベントが発生しません。たとえば、次のシナリオがあります。

var $input = $('#myinput');

$input.on('input', function() {
  // Do this when value changes
  alert($input.val());
});

$('#change').click(function() {
  // Change the value
  $input.val($input.val() + 'x');
});
<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

問題：テキストフィールドに入力するとイベントがトリガーされますが、ボタンを押してもトリガーされません。何らかのイベントで、または手動で行う必要なしに、これを達成する方法はありますか？

私がやりたくないこと：すべてのコードを調べて、triggerまたは関数呼び出しを手動でどこにでも追加できますが、それは私が探しているものではありません。

理由：これを自動的に実行したい主な理由は、多くの入力フィールドと、これらの入力をプログラムで変更するさまざまな場所があるためです。コードのどこかで入力が変更されたときに、イベントを自動的に起動する方法があれば、時間を大幅に節約できます。

javascriptjqueryhtmleventsinput
15
Duncan Luk

簡単な解決策：

val()を呼び出した後、inputをトリガーします。

_$input.trigger("input");
_
_var $input = $("#myinput");

$input.on('input', function() {
  alert($(this).val());
});

$('#change').click(function() {
  // Change the value and trigger input
  $input.val($input.val() + 'x').trigger("input");
});_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input id="myinput" type="text" />
<button id="change">Change value</button>_

特定の解決策：

前述のように、手動でinputをトリガーする必要はありません。このソリューションは、val()をオーバーライドして、イベントを自動的にトリガーします。

これをコードに追加するだけです：

_(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        var res = originalVal.apply(this, arguments);

        if (this.is('input:text') && arguments.length >= 1) {
            // this is input type=text setter
            this.trigger("input");
        }

        return res;
    };
})(jQuery);
_

JSFiddle Demo を参照してください

[〜＃〜] ps [〜＃〜]

条件のthis.is('input:text')に注意してください。より多くのタイプのイベントをトリガーする場合は、それらを条件に追加します。

20
Jaqen H'ghar

それを達成する方法にはいくつかの方法があります。ここでは、要素が変更されるとすぐに発生するレベルアップHTMLのoninput()イベントを使用して、関数を呼び出すことができます。

_<input id="myinput" type="text" oninput="sample_func()" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
_

。

_var input = $("#myinput");

function sample_func(){
  alert(input.val());
}

$('#change').click(function() {
  input.val(input.val() + 'x');
});
_

または、このjQuery、input事（上記の例に関連するだけ）。

_<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
_

。

_var input = $("#myinput");

input.on("input", function() {
  alert(input.val());
});

$('#change').click(function() {
  input.val(input.val() + 'x');
});
_

また、一定の時間間隔で常に実行されるjavascript setInterval()を使用することもできます。時間関連のプログラムを行う場合は、これはオプションであり、最良の方法です。

_<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
_

。

_var input = $("#myinput");

setInterval(function() { ObserveInputValue(input.val()); }, 100);

$('#change').click(function() {
  input.val(input.val() + 'x');
});
_
4
rhavendc

.trigger()を使用する以外に方法がないようです。

.change()イベントを使用して同じことを試してみましょう：

var $input = $("#myinput");

$input.on('change paste keyup', function() {
  alert($(this).val());
});

$('#change').click(function() {
  $input.val($input.val() + 'x').trigger("change");
});
<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

または、手動でトリガーする必要があります。

$('#change').click(function() {
  $input.val($input.val() + 'x').trigger("input");
});

スニペット

var $input = $("#myinput");

$input.on('input', function() {
  alert($(this).val());
});

$('#change').click(function() {
  $input.val($input.val() + 'x').trigger("input");
});
<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2
Praveen Kumar Purushothaman

jQueryリスナーは実際のブラウザーイベントでのみ機能し、プログラムで何かを変更してもスローされません。

独自のミニチュアjQuery拡張機能を作成してこれをプロキシし、常にイベントをトリガーしますが、次のように1つのモジュール式の場所で実行するだけで済みます。

$.fn.changeTextField = function (value) {
  return $(this).val(value).trigger("change");
}

次に、jQueryの 'val'関数を使用する代わりに、テキストフィールドを更新するときにいつでも新しい関数を呼び出すだけです。

$("#myInput").changeTextField("foo");

プロキシ関数を使用するバージョンは次のとおりです。

    <!DOCTYPE html>
    <html>
        <head>
            <title>Test stuff</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        </head>
        <body>

  <input id="myInput" type="text" />
        <button id="myButton">Change value</button>

        <script type="text/javascript">
            $.fn.changeTextField = function (value) {
             return $(this).val(value).trigger("change");
            }

            $( document ).ready(function() {
                var $input = $("#myInput");

                $input.on("change", function() {
                    alert($input.val());
                });

                $('#myButton').click(function() {
                    $("#myInput").changeTextField("foo");
                });
            });
        </script>
        </body>
    </html>

参考までに、この質問は本当にここですでに回答されています： val（）を使用してselectの値を設定すると、jquery changeイベントがトリガーされないのはなぜですか？

そしてここ： プログラムによる変更イベントを検出するJQuery

1
hightempo
$input.val($input.val() + 'x')
$input.trigger('change');

Changeイベントは、入力がぼやけたときにのみ発生します。

0
gu mingfeng
var $input = $('#myinput');

$input.on('input', function() {
  // Do this when value changes
  alert($input.val());
});

$('#change').click(function() {
  // Change the value
  $input.val($input.val() + 'x');
});
<input id="myinput" type="text" />
<button id="change">Change value</button>

<script src="*https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js*"></script>
0
Prakash Satani

トリガーが機能しませんでした。イベントを作成し、ネイティブJavaScriptでディスパッチすることで作業が完了しました。

ソース： https://stackoverflow.com/a/41593131/6825339

 <script type="text/javascript">
            $.fn.changeTextField = function (value) {
             return $(this).val(value).dispatchEvent(new Event("input", { bubbles: true });
            }

            $( document ).ready(function() {
                var $input = $("#myInput");

                $input.on("change", function() {
                    alert($input.val());
                });

                $('#myButton').click(function() {
                    $("#myInput").changeTextField("foo");
                });
            });
        </script>
0
Zulqarnain