create link in ajax callback

Question

I create a link in ajax callback function and define a class for that, commands that I write on click of this link doesn't work. the code is here:

$('.catpics').click(function(){
   var id=$(this).attr('id');
   $.post('storehouse.php', {
     catid:id,
     btn:'showsub'
   },function(data){
     $('#subcatshelf').append('<a class="catpics" id="'+ data+'">'+data+'</a>');
   });

It doesn't work perhaps because you didn't include a `href=url` in your `` tag so you're just getting some underlined text rather than a link, right? — developerwjk, Nov 18 '15 at 20:01
what is important for me is that onclick function happens for my link too, I test it with href but doesn't work — Setareh Afshari, Nov 18 '15 at 20:06
The duplicate will explain how to add your events. Basically you can bind to a parent element that contains the links, and just respond to all clicks like `$(".catpiccontainer").on('click','.catpics', function() {...});` — MiltoxBeyond, Nov 18 '15 at 20:08

David Zorychta · Accepted Answer · 2015-11-18T20:13:33.757

$('.catpics').click(function(){ only binds to links once. You're looking for .on which will bind to the first object you give it (so you can give it the body of your webpage) and then tell it to listen for clicks on .catpics and since the listener is on the body and not the individual .catpics elements, it wont matter when the links are actually inserted or deleted:

$('body').on('click', '.catpics', function() {
   var id=$(this).attr('id');
   $.post('storehouse.php', {catid:id,btn:'showsub'},function(data){
     $('#subcatshelf').append('<a class="catpics" id="'+ data+'">'+data+'</a>');
   });
});

alternatively you can make click work just fine by pulling out the event handler and just setting up a new clicked listener as you insert a new link:

function clickedCatPic() {
   var id=$(this).attr('id');
   $.post('storehouse.php', {catid:id,btn:'showsub'},function(data){
     var link = $('<a class="catpics" id="'+ data+'">'+data+'</a>');
     $('#subcatshelf').append(link);
     link.click(clickedCatPic);
   });
}

$('.catpics').click(clickedCatPic);

thanks a lot it works – Setareh Afshari Nov 18 '15 at 20:17 — Setareh Afshari, Nov 18 '15 at 20:17

create link in ajax callback

1 Answers1