0

我试图在将链接悬停但不工作时加载框架中的链接。如果我将此功能用于我在页面上创建的任何链接都可以正常工作，但是当我在动态创建的情况下使用它时不起作用。

这是在页面上创建的数据

$('#user-tweets').append('<table class="tweets" width="320" border="0"><tr><td rowspan="1">' + 
  user + '</td><td rowspan="1">' + 
  date + '</td></tr><tr><td width="45"><a href="' + 
  profile_img + '"><img src="' + 
  profile_img + '" width="55" height="50"/></a></td><td width="186">' + 
  text + '<p><a href="' + url + '"target="_blank">' + 
  url + '</a></p></td></tr></table><hr>'
);

...并且当我悬停时，我正在使用此功能将链接打开到框架中。

$("a").hover(
  function() {
    $(this).append($("<iframe src='"+this.href+"'></iframe>"));
  },
  function () {
    $(this).find("iframe:last").remove();
  }
);
4

1 回答 1

0

您必须使用委托的事件处理程序，使用.on().

$('#user-tweets').on('mouseenter', "a", function() {
    $(this).append($("<iframe src='"+this.href+"'></iframe>"));
}).on('mouseleave', 'a', function () {
    $(this).find("iframe:last").remove();
});

这个想法是您将处理程序绑定到某个在脚本运行时已经存在的父元素。然后，在新内容上触发的事件可以将 DOM 树冒泡到该父级并在那里进行处理。因此，您可以处理与特定选择器匹配的所有元素上的事件，即使它们尚不存在。

于 2012-09-02T09:25:07.170 回答