私は、ページ上の要素 "a"と "button"を動的に作成して削除しています。ハンドラを作成するときにハンドラ "onclick"を追加します。これまでに私が見たすべての例はjqueryにありました。純粋なJavaScriptでどうすればいいですか?純粋なjavascriptの動的に作成された要素に "onclick"ハンドラを追加します。
-1
A
答えて
0
addEventListener
を使用して、ダイナミックボタンにクリックリスナーを追加できます。
var btn = document.createElement("button");
btn.addEventListener('click', function(){
alert('button clicked!');
}, false);
document.body.appendChild(btn);
+0
「onclick」はなぜですか? – Kooooro
+0
委任について詳しく知りたい場合は、この回答を確認してください。http://stackoverflow.com/a/6348597/823369 –
0
この例では、テキストを含むボタンを作成し、idがtest
の要素に追加します。
var btn = document.createElement('button');
btn.appendChild(document.createTextNode('test'));
btn.addEventListener('click', function() {
alert('it works');
}, false);
document.getElementById('test').appendChild(btn);
これがうまくいけばうまくいきます。
0
から:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListenerこのようにあなたが行うことができます
HTMLコンテンツ
<table id="outside">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
JavaScriptコンテンツ
// Function to change the content of t2
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
3
:
for(var i=0;i<5;i++){
var a = document.createElement("a");
a.innerHTML="a"+i;
document.body.appendChild(a);
var button = document.createElement("button");
button.innerHTML="button"+i;
button.onclick = function(){
console.log("event on button");
}
document.body.appendChild(button);
}
関連する問題
- 1. jQueryは、動的に作成された要素にクラスを追加します。
- 2. 動的に作成された要素にjQueryが追加されない
- 3. javascriptまたはjqueryで動的に作成されたdivにhtml要素を追加します。
- 4. は、イベントリスナーを追加し、動的に生成された要素
- 5. 動的に作成されたdivに要素を追加する(追加しない)
- 6. jQueryにツールチップを追加すると、動的に作成された要素
- 7. 動的に作成された要素にカスタムトリガーを追加する
- 8. 動的に作成されたアンカー要素へのjavascriptのバインド
- 9. 純粋なJavascriptでの要素座標
- 10. 動的に作成されたリンクボタンにonclickイベントを追加する
- 11. jQueryは、動的に作成された要素にバインドされたハンドラを実行しません。
- 12. 動的に追加された子要素に作用しないクリックイベント
- 13. onclick関数の要素の属性に動的に作成された要素の文字列を渡す
- 14. 動的に追加された要素にイベントをバインドする
- 15. 動的に追加された要素にイベントハンドラをアタッチする
- 16. 動的に作成された別の要素内の動的に作成された要素にイベントをバインドする方法はありますか?静的な祖先を持って、動的に作成された要素に
- 17. 動的に生成された要素にイベントを追加する
- 18. 動的に追加されたテンプレート要素にクラスを追加する
- 19. 動的に追加されたhtml要素にイベントリスナーを追加する
- 20. 新しい要素が動的フォームに追加されない
- 21. 純粋なjavascript範囲スライダコントロールの作成
- 22. web.list.Columnのサブクラスに作成されたDOM要素にコールバックを追加します。
- 23. 動的に作成された要素へのスクリプトのバインド
- 24. 純粋なJavascriptを使用して要素にイベントをバインドします。
- 25. DOM作成された要素に数値を追加する
- 26. jQuery動的に追加された要素をクリック
- 27. 動的に追加された要素でslideToggle()を使用
- 28. 動的に作成されたDOM要素のng-change
- 29. 動的に作成された要素の選択Polymer 1.0 Safari
- 30. 動的に作成し、Javascriptでタブスペースを追加します。
これはバニラJSのためのドキュメント次のとおりです。http ://www.w3schools.co m/js/js_htmldom_eventlistener.asp – Fefux
この記事を参照してください:http://stackoverflow.com/questions/6956258/adding-onclick-event-to-dynamically-added-button –