web-dev-qa-db-ja.com

JavaScriptで新しく追加された要素にonclickイベントを追加します

JavaScriptで追加した新しい要素にonclickイベントを追加しようとしています。

問題は、document.body.innerHTMLをチェックすると、実際にonclick = alert（ 'blah'）が新しい要素に追加されていることを確認できることです。

しかし、その要素をクリックしても、アラートボックスが機能していません。実際、JavaScriptに関連するものはすべて機能していません。

ここに新しい要素を追加するために使用するものがあります：

function add_img() { 
  var elemm = document.createElement('rvml:image'); 
  elemm.src = 'blah.png';
  elemm.className = 'rvml';
  elemm.onclick = "alert('blah')";
  document.body.appendChild(elemm);
  elemm.id = "gogo";
  elemm.style.position='absolute';
  elemm.style.width=55;
  elemm.style.height=55;
  elemm.style.top=200;
  elemm.style.left=300;
  elemm.style.rotation=200; 
}

この関数を呼び出す方法は次のとおりです。

<button onclick=add_img()>add image</button>

これで、画像はブラウザ内に完全に描画されます。しかし、画像をクリックしても、そのアラートは表示されません。

javascripteventsnew-operatorelementadd
55
SolidSnake

.onclickは、文字列ではなく関数に設定する必要があります。試して

elemm.onclick = function() { alert('blah'); };

代わりに。

130
kennytm

確かではありませんが、試してください：

elemm.addEventListener('click', function(){ alert('blah');}, false);
16
Boris Delormas

属性を設定することもできます：

elem.setAttribute("onclick","alert('blah');");
6
bonafernando

文字列でイベントを割り当てることはできません。それを使用してください：

elemm.onclick = function(){ alert('blah'); };
4
MinhNguyen

簡単な答え：ハンドラーを関数に設定する場合：

elemm.onclick = function() { alert('blah'); };

少し長めの答え：ブラウザ間で一貫して動作させるには、さらに数行のコードを記述する必要があります。

事実、一般的なブラウザーのセット全体でその特定の問題を解決する可能性のある、わずかに長いコードでさえ、独自の問題を抱えています。したがって、クロスブラウザのサポートを気にしない場合は、完全に短いものを使用してください。あなたがそれを気にし、絶対にこの1つだけを機能させたい場合は、addEventListenerとattachEventの組み合わせで行ってください。オブジェクトを広範囲にわたって作成し、コード全体でイベントリスナーを追加および削除できるようにし、それをブラウザー間で機能させたい場合は、jQueryなどのライブラリにその責任を委任する必要があります。

2
David Hedlund

このようにできるとは思わない。あなたが使用する必要があります：

void addEventListener( 
  in DOMString type, 
  in EventListener listener, 
  in boolean useCapture 
);

ドキュメント 右 。

2
Guillaume Lebourgeois

3つの異なる問題があります。まず、HTMLタグの値を引用符で囲む必要があります！これを行わないと、ブラウザが混乱し、トラブルが発生する可能性があります（ただし、ここではそうではない可能性があります）。第二に、他の誰かが意図したように、実際にonclick変数に関数を割り当てる必要があります。これは今後の適切な方法であるだけでなく、onclick関数でローカル変数を使用しようとする場合に非常に簡単になります。最後に、addEventListenerまたはjQueryのいずれかを試すことができます。jQueryにはより優れたインターフェースの利点があります。

ああ、そしてあなたのHTMLが検証することを確認してください！それが問題になる可能性があります。

0
crazy2be

理由は言えませんが、es5/6構文は機能しません

elem.onclick = (ev) => {console.log(this);}動作していません

elem.onclick = function(ev) {console.log(this);}動作中

0
bresleveloper