Javascript hyperlinks don't work with jQuery append

Question

I need some help pointing to the right direction. I have a jQuery code what pulls some HTML content via the $.get function after the page is loaded, puts them into the $data variable and it's appended to the div_content .

Everything works perfectly, except after the appending the javascript links in the original content don't work.

The code part:

$(document.body).ready(function() {
$.get("content1.php", {id:"1234" }, function(data) {

  // for example this is the pulled data 
  var data = '<a href="javascript:;" data-id="someotherpage.php?var1=a&amp;var2=b&amp;var3=c">link</a>'

  $('.div_content').append(data);

});
});

The standard tags, without javascript aren't affected, they work fine.

I found some advices like this - jQuery Appended elements with href and javascript doesn't work - and this - Appending a link with Jquery - and read the jQuery's .on() function but doesn't seem to resolve my exact problem with appending the content.

I have jQuery 1.10.1, thanks for all the inputs.

Answer 1

Without seeing what data may contain its difficult to see exactly what you're trying to achieve but I can see the fist thing you do after receiving the ajax response is overwrite the returned data which is obviously incorrect.

perhaps you meant something like this?:

 $.get("content1.php", {id:"1234" }, function(i,data) {
 var link = '<a href="someotherpage.php?var1='+data.var1+'&amp;var2='+data.var2+'">link</a>';
 $('.div_content').append(link);
 });

Answer 2

Thanks for the responses and comments, mea culpa, it was my, a design error. I had to include the jquery and fancybox JS and CSS into the someotherpage.php (the data-id attribute), and now it's working.