javascript - JavaScript によって作成された要素でマウスオーバーをトリガーする

Question

ボタンを押したときにリンクを作成し、これらのリンクのマウスオーバー イベントをリッスンする必要があります。

この関数を使用してリンクを作成します。

function newlink(){  
  var a = document.createElement('a');
  var linkText = document.createTextNode("Test");   
  a.appendChild(linkText);
  a.href ="Page.html";   
  a.setAttribute("class","trigger");
  document.getElementById('divID').appendChild(a);
};

本文には、次のボタンがあります。

<input type="button" value="Show Link" onClick="newlink()">

頭の中には、マウスオーバーをインターセプトする次の関数があります。

$(function(){
  $('a.trigger').hover(  
    function(e) {       
       alert ('Mouse over intercepted');
       ...  
  });
});

ボタンをクリックすると、リンクは正しく作成されますが、マウスオーバー イベントは生成されません。どうしたの？

Answer 1

動的に作成された HTML 要素にイベントを関連付けるには、 JQuery の.on()メソッドを使用します。

Answer 2

.on()次のように使用します。

$(document).on('mouseover','a.trigger',function(){
    alert('Mouse over intercepted');
});