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's .on()方法。

Answer 2

使用.on()，如下所示：

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

Answer 3

如果我在创建链接时是你，我会添加逻辑，而不是稍后通过JQuery。

你的代码会变成这样：

function newlink(){  
  var a = document.createElement('a');
  var linkText = document.createTextNode("Test");   
  a.appendChild(linkText);
  a.href ="Page.html";   
  a.setAttribute("class","trigger"); // <-- you probably don't need this anymore
  a.onmouseover = function() {
     // ... here is your logic !!!
  }
  document.getElementById('divID').appendChild(a);
};

Answer 4

.hover()是mouseenter和mouseleave事件的快捷方式，因此您可以使用.on()使用事件委派来注册用于动态添加内容的mouseenter和mouseleave事件的事件处理程序

function newlink(){  
    $('<a href="Page.html" class="trigger">Test</a>').appendTo('#divID');
};

$(function(){
    $('#divID').on('mouseenter', 'a.trigger', function(){
        console.log('entered')
    })
})

触发鼠标悬停在JavaScript创建的元素上

4 个答案: