Удаление элементов из динамически генерируемого списка с помощью jQuery

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 в обработчик готовности документа.

Ваш код должен выглядеть следующим образом (добавлен лучший способ удаления элемента li при успешном вызове ajax):

$(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 () и вызвать свой метод удаления на стороне сервера для удаления из базы данных.

Чтобы обновить список после удаления, просто перепроверьте список, используя шаблон, который вы уже определили.