jquery .on is not working after ajax call

Question

In first page of the website, there's a slider, a big photo with some thumbnails, when you click on thumbnails the big photo changes. there are some:

<a class="top_block_link" id="selectable1">Lorem Ispium</a>

when someone clicks on it, current html changes to new big photos and their thumbnails. problem is here that now when I click on thumbnails the big photo doesn't change. this is my jquery:

$(function() {  
      $(".top_block_link").on("click",function(){  
        var anchorId = $(this).attr("id");
                $.ajax({url:"selectable.php?q="+ anchorId ,success:function(result){
                    $(".panelContainer").empty();
                    result = result.split('||');
                    $(".panelContainer").html(result[0]);
                    $("#movers-row").empty();
                    $("#movers-row").html(result[1]);
                 },error:errFunc});
                  function errFunc (xhr,status, strErr) {
                            $("#panelContainer").html("connecting error happened");
                  } 
            });
          });

as far as I know after loading ajax, jquery can't handle the events on the new attached html. what can I do about it? thank you

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Dec 31 '13 at 07:26

score 0 · Answer 1 · answered Dec 31 '13 at 07:32

on is working here... Lorem Ispium

Javascript code":

      $(function() {  
  $(".top_block_link").on("click",function(){  
    var anchorId = $(this).attr("id");
      alert('hi');
            $.ajax({
                url:"selectable.php?q="+ anchorId,
                success:
                function(result){
                $(".panelContainer").empty();
                result = result.split('||');
                $(".panelContainer").html(result[0]);
                $("#movers-row").empty();
                $("#movers-row").html(result[1]);
             },
                error:
                function(xhr,status, strErr){
                    $("#panelContainer").html("connecting error happened");
                }
            });

        });
      });

you can also check it on jsfiddle.. Demo

thanks manoj that worked! but there is another problem, when ajax has been loaded coda slider lose its sliding effect! — gegham, Jan 04 '14 at 03:58

jquery .on is not working after ajax call

1 Answers1