Question

I am trying to load links in frames when am hovering them but is not working. If I use this function to any link that I create on the page is working but when i use it on dynamically created is not working.

This is the data that are created on the page

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

…and am using this function to open links into frames when i hover.

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

Answer 1

You have to use a delegated event handler, using .on().

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

The idea is that you bind the handler to some parent element which already exists at the time your script is being run. Then, the event triggered on the new content can bubble up the DOM tree to that parent and be handled there. Thus you can handle events on all elements matching a specific selector, even if they don’t yet exist.