でプログラム的にそれを行うときに、私は、チェックボックスなぜチェックボックスの変更イベントではありません、私はd3js
somefunction() {
d3.select("input").property("checked", true);
}
と、このようなチェックボックスの変化を検出し、私が持っている別の関数内を変更する機能を持っているトリガー：
d3.selectAll("input").on("change", change);
私が持っている問題は、それは私がそれをクリックすることなく、チェックボックスを変更したとき、それは「正しい」の変化として検出しませんです。 「適切な」変更としてそれを変更する何かを検出させるために私は何をすることができますか？
d3は、標準addEventListenerを使用しています（onメソッド）。問題は、のプロパティをdoesn't raise any eventsに変更して確認することです。適切な方法は、ちょうどpropteryを設定した後、ハンドラを自分で呼び出すために、次のようになります。
var myInput = d3.select("input");
myInput.property("checked", true);
myInput.on("change")(); // call it yourself
全作業コード：
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<input type="checkbox" />
<script>
var checked = false;
setInterval(function(){
checked = !checked;
var myInput = d3.select("input");
myInput.property("checked", checked);
myInput.on("change")();
}, 2000);
d3.select("input").on("change", function(d){
console.log('checkbox changed');
});
</script>
</body>
</html>マークによって提案されたソリューションは、しかし、ちょうどその代わりに完璧に動作しますまた、イベントハンドラを自分で呼び出すのではなく、自分でイベントをトリガして残りのコードをそのまま残すこともできます。 onchangeイベントは、次のシーケンスfocus-valueChange-unfocusでトリガーされます。これをクリックせずに変更すると、これは起こりません。値は変更されますが、フォーカスはありません。とにかくそれに頼るのではなく、あなた自身でonchangeイベントを引き起こすことができます。私はそれを説明するフィドルをここに作りました。それがお役に立てば幸い：私がチェックし、代わりに真優先にプロパティを設定したときに、何らかの理由でhttps://jsfiddle.net/xcjje9r3/6/
window.clickMe = function() {
tmp = d3.select('#cbox');
if (tmp.property('checked') == false) tmp.property('checked', true);
else tmp.property('checked', false);
tmp[0][0].dispatchEvent(evt); //MANUALLY TRIGGER EVENT
}
//tmp[0][0] is becoz d3.select returns an array and [0][0] position stores the actual DOM element in this array.
window.listenerInitialize = function() {
evt = document.createEvent("HTMLEvents"); //CREATE NEW EVENT WITH TYPE
evt.initEvent("change", false, true); //THE EXACT EVENT TO FIRE
d3.select('#cbox').on('change', alerting); //ADDING LISTENER FOR EVENT
}
window.alerting = function() {
alert('testEvent');
}
、私の特定のコードのために、それを好きではなかったです。しかし、それは動作しますので、ありがとう！k –
@ KNN.T、私は文字列 "チェック"には設定されていませんが、チェックされたブール変数に設定されています。申し訳ありませんが、私の大きなコードサンプルから抜粋しました。 – Mark
ああ甘い、とにかくありがとう。それはうまく動作します：D –