0

当我按下按钮并监听这些链接的鼠标悬停事件时，我需要创建链接。

我使用这个函数来创建链接：

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');
       ...  
  });
});

当我单击按钮时，链接会正确创建，但不会生成 mouseover 事件。有什么问题？

4

4 回答 4

0

.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')
    })
})
于 2013-04-17T15:54:25.977 回答
0

要将事件附加到动态创建的 HTML 元素，请使用JQuery 的.on()方法。

于 2013-04-17T15:31:10.857 回答
0

使用.on()，像这样：

$(document).on('mouseover','a.trigger',function(){
    alert('Mouse over intercepted');
});
于 2013-04-17T15:33:00.177 回答
0

如果在您创建链接时我是您，我会添加逻辑，而不是稍后通过 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);
};
于 2013-04-17T15:37:34.553 回答