使用jQuery从动态生成的列表中删除项目

如何解决使用jQuery从动态生成的列表中删除项目

| 我对jQuery很陌生，所以如果这很琐碎，请原谅我。 我正在基于存储在数据库中的信息动态生成链接列表。在每个链接旁边，放置一个删除按钮。目的是首先从数据库中删除信息，然后从html页面中删除自身及其容器。现在，当我尝试将事件附加到每个按钮时，由于某种原因，这似乎不起作用。任何帮助将不胜感激 到目前为止，我想出了以下代码： 对于html部分：

<div id=\"main-content\">
    <div id=\"existing-content\">
    </div>
    <div id=\"new-content\">
        <p>
       <input type=\"button\" id=\"newcat\" value=\"Nieuwe Categorie\" />
   </p>
    </div>
</div>

然后对于jQuery部分：

$(document).ready(function() {
    $.getJSON(\'getCategories.PHP\',function(data,textStatus,jqXHR) {
        // Check if there are any categories in the database (this works)
        if (eval(data.categoriesPresent)) {
            // Append an ordered list of links to the div
            $(\'#existing-content\').append(\'<ol id=\"categories\"></ol>\');

            // Append list items to the ordered list (this also works)
            for (i=0; i<data.categories.ids.length; i++) {

                // JSON call to get numerical id of a category
                var catId = data.categories.ids[i];
                var catName = data.categories.names[i];

                // Create a listing of all categories currently stored in the database
                $(\'#categories\').append(\'<li id=\"listItem\' + catId 
                    + \'\"><p><a href=\"category.html?catId=\' + catId  
                    + \'&catName=\' + catName +\'\">Categorie: \' + catName
                    + \'</a></label><input type=\"button\" class=\"delete\" id=\"cat\"\' + catId 
                    + \' value=\"Verwijder\" ?></p></li>\'
                );

               // Generate delete functions for all available categories (this DOESN\'T work)
               $(\'#cat\' + dataId).click(function() {
                   alert(\"WE GOT HERE\");
                   $.ajax({
                       url : \"deleteCategory.PHP?catId=\" + data.categories.ids[i],success : function() {
                           $(\'#listItem\' + data.categories.ids[i]).remove();
                       }
                   });
               });
           }
       }
   });
   ...
});

    

解决方法

        您可以使用live将事件绑定到动态创建的元素。 在您的情况下，请使用类选择器.delete标识删除按钮。 还将实时方法调用从getJSON回调中移出，并移入文档就绪处理程序。 您的代码现在应如下所示（在成功的ajax调用中添加了删除li元素的更好方法）：

$(document).ready(function() {
  // Generate delete functions for all available categories
     $(\".delete\").live(\"click\",function() {
            var $this = $(this);
                    var catID = this.id.replace(/[^0-9]/g,\"\");
             alert(\"WE GOT HERE\");
             $.ajax({
                     url : \"deleteCategory.php?catId=\" + catID,success : function() {
                             $this.closest(\"li\").remove();
                     }
             });
     });

    $.getJSON(\'getCategories.php\',function(data,textStatus,jqXHR) {
        // Check if there are any categories in the database (this works)
        if (eval(data.categoriesPresent)) {
            // Append an ordered list of links to the div
            $(\'#existing-content\').append(\'<ol id=\"categories\"></ol>\');

            // Append list items to the ordered list (this also works)
            for (i=0; i<data.categories.ids.length; i++) {

                // JSON call to get numerical id of a category
                var catId = data.categories.ids[i];
                var catName = data.categories.names[i];

                // Create a listing of all categories currently stored in the database
                $(\'#categories\').append(\'<li id=\"listItem\' + catId 
                    + \'\"><p><a href=\"category.html?catId=\' + catId  
                    + \'&catName=\' + catName +\'\">Categorie: \' + catName
                    + \'</a></label><input type=\"button\" class=\"delete\" id=\"cat\"\' + catId 
                    + \' value=\"Verwijder\" ?></p></li>\'
                );
           }
       }
   });
   ...
});

    ,        查看jQuery模板。它们对于生成数据驱动列表非常有用。然后，您可以通过jQuery live（）将删除按钮单击处理程序附加到列表中的每个项目，并调用服务器端的delete方法从数据库中删除。 要在删除后刷新列表，只需使用已经定义的模板重新绑定列表。