Jquery not considering new div that is added by Jquery + php + jquery

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.

we need to see the jquery code if you need help.

Th0rndike
– Th0rndike

2012-03-16 09:20:08 +00:00
Commented Mar 16, 2012 at 9:20 — Th0rndike
– Th0rndike, Commented Mar 16, 2012 at 9:20

mgraph · Accepted Answer · 2012-03-16 09:20:31Z

1

the ID should always be unique so use class instead

in your case : <a id="delete_link">...</a> to <a class="delete_link">...</a>

answered Mar 16, 2012 at 9:20

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kashyap Over a year ago

sorry for not posting code properly. But I have done the same.

James Allardice · Accepted Answer · 2012-03-16 09:20:50Z

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.

Billy Moon · Accepted Answer · 2012-03-16 09:21:02Z

0

use live() instead of .bind()

answered Mar 16, 2012 at 9:21

Billy Moon

58.9k27 gold badges148 silver badges245 bronze badges

1 Comment

Amritpal Singh Over a year ago

.on is suggested instead on .live()

Amritpal Singh · Accepted Answer · 2012-03-16 09:21:53Z

0

It seems you are trying to delete dynamically added delete_link so i think you should use

$('id or class').on(click,function(){});

answered Mar 16, 2012 at 9:21

Amritpal Singh

1,7851 gold badge13 silver badges20 bronze badges

2 Comments

Amritpal Singh Over a year ago

@BillyMoon yes event should be mentioned

Kashyap Over a year ago

@AmritpalSingh thanks your answer was correct but James answer was before your so I have to select his.

Collectives™ on Stack Overflow

Jquery not considering new div that is added by Jquery + php + jquery

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related