2017-04-19 11 views
0

JavaScriptで動的に更新される入力フォームがあります。 d3を使用して、この入力が操作されるたびに関数を実行するイベントリスナーを作成します。フォーム入力イベントリスナー

現在、入力フィールドを手動で変更すると実行されますが、JavaScriptを使用して更新されている場合は実行されません。私は.on("change",....on("input",...を使ってみました。ここで

は私が取得しようとしていた機能の一例です:

<!DOCTYPE html> 
<meta charset="utf-8"> 

<input value="0" id="input1"> 
<button onclick="clickFunc();">Click Me</button> 


<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

d3.select("#input1").on("input", function() { 
// not printing when updated by javascript 
    console.log('value changed'); 
}); 

function clickFunc() { 
    document.getElementById('input1').value = document.getElementById('input1').value + 1; 
} 

</script> 

答えて

0

あなたが入力のを観察するMutationObserverウィンドウクラスを使用する必要がありますJSによってトリガされる変更。

たとえば、入力のノードvalueを設定するだけでは、MutationObserverがトリガーされません。あなたはMutationObserverによって取り上げられた変更を得るためにsetAttribute(value, "value")を呼び出さなければなりません。

は、ここで私が作った作業例です:もちろん​​

、これはバニラJSソリューションです。あなたがバニラを気にせずに、jQueryを使用することが望ましい場合は、jQueryに回答してください:Detect all changes to a <input type="text"> (immediately) using JQuery

しかし、私はそれが動作することを保証することはできません。テストしていない。

0

あなたはinput要素でoninput=""属性で機能を実行することができます。 JS

<input type="text" oninput="myFunction()"> 

、あなたも使用することができます。

$("myobject").oninput = function(){myScript}; 

か、このいずれかで優れている:

$("myobject").addEventListener("input", myScript); 
関連する問題