Question

I have a php page where I add and delete items from database using Jquery + PHP + AJAX.

Now I am able to delete and add when that page loads for the first time.

Now if I first add an element; which in turn adds record to the DB and then updates the div that contains all the listing of divs.
Example:

<div id="all_items">
  <div id= "item_1">
      <a id="delete_link">...</a>
  </div>
  <div id= "item_2">
      <a id="delete_link">...</a>
  </div>
  .... Upto Item n
</div>

Now I replace the div with id all_items.

Now I have jQuery at the bottom of the page which calls ajax on a tag of delete_link.

Situtation is:

When page is loaded I can delete any item from the list.
But if I page load i add new item first. (which will update all_items div) after that if I try to click on delete link. Jquery on click selector event is not fired and which in turn doesn’t do delete ajax operation.

I couldn’t figure out why this is happening.

Looking for some help here.

EDITED:
Sorry for not writing code earliar.
Following is the jQuery I am talking about.

    <script type="text/javascript" >
    var jQ = jQuery.noConflict();
    jQ(function() {
                jQ("#submit_store").click(function() {
                            var store_name = jQ("#store_name").val();
                            var dataString = 'store_name='+ store_name;
                            dataString += '&mode=insert';
                            if(store_name =='')
                            {
                                        alert("Please Enter store Name");
                            }
                            else {
                                    jQ.ajax({
                                                type: "POST",
                                                url: "<?php echo $mycom_url; ?>/store_insert.php",
                                                data: dataString,
                                                cache: false,
                                                success: function(html){
                                                            jQ("#dvstoreslists").html(html);                                                            
                                                            document.getElementById('store_name').value='';
                                                            document.getElementById('store_name').focus();
                                                }
                                    });
                        }

                        return false;
            });

            jQ(".store_delete").click(function() {
                        var store_id = jQ(this).attr('id');

                        var id = store_id.split("_");
                        var dataString = 'store_id='+ id[2];
                        dataString += '&mode=delete';
                        var to_delete = "#store_list_" + id[2]
                                    jQ.ajax({
                                                type: "POST",
                                                url: "<?php echo $mycom_url; ?>/store_insert.php",
                                                data: dataString,
                                                cache: false,
                                                success: function(html){
                                                            jQ(to_delete).hide("slow");
                                                }
                                    });
                        return false;
            });
});

</script>

So If on page load, I delete then delete on click jquery event is fired. But after adding new store and replacing div of stores with new div. then jQuery on click event is not fired.
My HTML is as below.

    <div class="sbBox stores">
        <form id="add_storefrm" name="add_storefrm" method="post" action="" >
            <div class="dvAddStore">
                <div class="dvName" id="store_list">
                    <input type="text" id="store_name" name="store_name">
                    <input type="hidden" value="addstore" id="mode" name="mode">        
                </div>

                <div class="btnAddStore">
                    <input type="submit" name="submit_store" value="Add Store" id="submit_store">
               </div>
           </div>
           <div id="dvstoreslists">
               <?php
               $query = "SELECT * FROM #__shoppingstore order by store_id desc;";
               $db->setQuery($query);
               $rows = $db->loadObjectList();
               foreach($rows as $row)
               {
                   echo "<div class=dvlist id=store_list_".$row->store_id ."><div class=dvStoreListLeft>";
                   echo "<div class='slname'><h3>" . $row->store_name . "</h3></div>";
               ?>
               <div class="slDelBtn">
                   <p id = "p_store_<?php echo $row->store_id ; ?>">
                       <a id="store_delete_<?php echo $row->store_id ; ?>" class="store_delete" alt="Delete" onclick="DeleteStore(<?php echo $row->store_id ; ?>);" >            
                       </a>
                   </p>
               </div>
           </div>
       </div>
       <?php   } ?>
   </div>
   </form>
   </div>

Sorry folks for not posting the code earliar.

Answer 1

When you replace the contents of #all_items any event handlers that were bound to any descendants will no longer exist. You can use event delegation, using the on method, to solve this:

$("#all_items").on("click", ".delete_link", function() {
    //Do stuff
});

Notice that I’m using a class selector (.delete_link) instead of an ID selector for the links. It’s invalid to have duplicate IDs in the same document.

Also note that the above will only work if you are using jQuery 1.7 or above. For older versions, use delegate instead:

$("#all_items").on(".delete_link", "click", function() {
    //Do stuff
});

This works because DOM events bubble up the tree from their target. So a click on a link which is a descendant of #all_items will bubble up through all of its ancestors and can be captured when it reached #all_items.