入力フィールドの変更がJavascriptによって変更されました

Question

私は入力フィールドtype="hidden"をjavascript自体で変更しています。

このフィールドが変更されると、私はイベント/機能をトリガーします。

はこの試みた：

$(".product_id").on("change paste keyup input", function(event){alert('1');}); 
$(".product_id").blur(function(event){alert('1');}); 
$(".product_id").keypress(function(event){alert('1');}); 

をしかし、価値が他のJavaScriptファイル自体によって変更されるように動作していないようです。

私は既存のJavaScriptを変更または追加することはできません。 入力フィールドに何も追加できません。

Answer 1

jQueryのtriggerメソッド& changeイベントを使用できます。

値を隠し要素に変更しても、.change()イベントは自動的に発生しません。したがって、隠し入力を変更するとすぐに、.trigger('change')メソッドを使用してjQueryにトリガーするように指示する必要があります。

あなたはこのようにそれを行うことができます。

$(function() { 
 
    $("#field").on('change', function(e) { 
 
    \t alert('hidden field changed!'); 
 
    }); 
 
    
 
    $("#btn").on('click', function(e) { 
 
    \t $("#field").val('hello!').trigger('change'); 
 
    console.log('Hidden Filed Value: ' + $('#field').val()); 
 
    }); 
 
    
 
    console.log('Hidden Filed Value: ' + $('#field').val()); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="field" type="hidden" name="name"> 
 
<button id="btn"> 
 
    Change Hidden Field Value 
 
</button>

は、この情報がお役に立てば幸い！

Answer 2

var element = $(".product_id"); 
element.on("change", function(){ 
    alert('hey'); 
}).triggerHandler('change'); 

と、私たちは、プログラムのようにそれをトリガーする必要があります：あなたがソースからのchangeイベントをトリガすることができない場合、それはちょうどハックだ

$('.product_id').val('abcd').triggerHandler('change'); 

Answer 3

。

setInterval()でよい解決策ではありません。しかし、hiddeninputの値を変更しているソースからchangeイベントをトリガーできない場合に役立ちます。

$("#input")[0].oninput = function(){ 
 
    $("#hidden").val($(this).val()); //setting hidden value 
 
} 
 
var oldVal = $("#hidden").val(); 
 
setInterval(function(){ //listening for changes 
 
    var newVal = $("#hidden").val(); 
 
    if(newVal !== oldVal){ 
 
    console.log(newVal); 
 
    oldVal = newVal; 
 
    } 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="hidden" id="hidden"> 
 

 
<input type="text" id="input">