Question

I have a PHP application, which has a delete function on one of the pages. I am allowing user to delete a tag from their profile, by clicking on the tag. Once the user clicks the tag, the content area in the HTML which previous displayed the tags, gets updated with the new set of tags.

Now the problem is, from the list of tags,the first time user clicks a tag, it is deleted.If the user now clicks another tag(from the refreshed area), nothing happens.

 $("a.single_tag").click(function(){
   the_id = $(this).attr('id');
     $.ajax({
         type: "POST",
         data: "data="+the_id,
         url: "<?php echo site_url('user/deletetag/');?>/",
         success: function(msg)
         {
           $("#current_tags").fadeIn("slow");
           $("#current_tags").html(msg);

         }
    });  

Thanks

Answer 1

Instead of using .click() for this, you want .live('click', func), like this:

$("a.single_tag").live('click', function() {

When you use .click() you’re binding a click handler to those elements, but when the content gets replaced, new elements with no handlers are there. With .live() it listens for the click event when it bubbles to document and executes…whether the element was there when the page loaded or added later, it won’t matter…fixing your issue 🙂