Question

我对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();
                       }
                   });
               });
           }
       }
   });
   ...
});

Answer 1

您可以使用live将事件绑定到动态创建的元素。

在您的情况下，使用类选择器.delete来标识删除按钮。

还将live方法调用移出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>'
                );
           }
       }
   });
   ...
});

Answer 2

结帐jQuery Templates。它们对于生成数据驱动列表非常有用。然后，您可以通过jQuery live()将删除按钮单击处理程序附加到列表中的每个项目，并调用服务器端删除方法从数据库中删除。

要在删除后刷新列表，只需使用已定义的模板重新绑定列表。

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

2 个答案: