Question

我正在尝试在悬停它们时加载帧中的链接但是不起作用。如果我将此函数用于我在页面上创建的任何链接，但是当我在动态创建时使用它时，它无效。

这是在页面上创建的数据

$('#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();
  }
);

Answer 1

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

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

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

使用jquery动态创建内容

1 个答案: