Question

我有一个php页面，我使用Jquery + PHP + AJAX在数据库中添加和删除项目。

现在，我可以在第一次加载该页面时删除并添加。

现在如果我先添加一个元素;然后将记录添加到数据库，然后更新包含所有div列表的div。例如：

<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>

现在我用id all_items替换div。

现在我在页面底部有一个jQuery，它在delete_link的标签上调用ajax。

Situtation是：

加载页面后，我可以删除列表中的任何项目。但如果我加载页面，我首先添加新项目。（之后将更新all_items div）如果我尝试点击删除链接。没有触发点击选择器事件的Jquery，而这又不会删除ajax操作。

我无法弄清楚为什么会这样。

在这里寻求帮助。

EDITED：很抱歉没有写代码earliar。以下是我正在讨论的jQuery。

    <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>

所以如果在页面加载，我删除然后删除点击jquery事件被触发。但在添加新商店并用新div替换商店div之后。然后jQuery on click事件没有被触发。我的HTML如下所示。

    <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>

很抱歉没有发布代码earliar。

Answer 1

ID应该始终是唯一的，因此请使用class

在你的情况下：<a id="delete_link">...</a>到<a class="delete_link">...</a>

Answer 2

当您替换#all_items的内容时，任何与后代绑定的事件处理程序将不再存在。您可以使用on方法使用事件委派来解决此问题：

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

请注意，我正在使用类选择器（.delete_link）而不是链接的ID选择器。在同一文档中存在重复的ID是无效的。

另请注意，只有在使用jQuery 1.7或更高版本时才能使用上述内容。对于旧版本，请改用delegate：

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

这是有效的，因为DOM事件会从目标中冒出树。因此，点击作为#all_items后代的链接会点击其所有祖先，并在到达#all_items时被捕获。

Answer 3

使用live()代替.bind()

Answer 4

您似乎正在尝试删除动态添加的delete_link，所以我认为您应该使用

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

Jquery没有考虑由Jquery + php + jquery添加的新div

4 个答案: