Elemek törlése egy dinamikusan generált lista jQuery

szavazat
2

Én inkább az új jQuery, ezért bocsáss meg, ha ez triviális.

Én listájának létrehozását dinamikusan linkeket információ alapján, amelyet az adatbázisban tárolt. Továbbá minden kapcsolatot helyezzen egy törlés gombot. Ez a célja, hogy egyrészt törli az információt az adatbázisból, majd távolítsa el magát, és a tartályt a html oldalt. Most, amikor megpróbálja csatolni egy esemény minden gombot, ez úgy tűnik, nem működik valamilyen oknál fogva. Minden segítséget lenne nagyon méltányol

Eddig én találtam ki az alábbi kódot:

A html rész:

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

És akkor a jQuery rész:

$(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();
                       }
                   });
               });
           }
       }
   });
   ...
});
A kérdést 12/06/2011 14:18
a forrás felhasználó
Más nyelveken...                            


2 válasz

szavazat
1

Használhatja élő kötődni események dinamikusan létrehozott elemekkel.

Az Ön esetében használható osztályt választó .delete azonosítani a törlés gombot.

Szintén mozogni az élő metódushívást ki a getJSON visszahívási és a dokumentum készen felvezető.

A kód most így néz ki az alábbi (hozzá egy jobb módja annak, hogy távolítsa el a li elem sikeres AJAX hívás):

$(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>'
                );
           }
       }
   });
   ...
});
Válaszolt 12/06/2011 14:29
a forrás felhasználó

szavazat
0

Távozás jQuery sablonok . Ezek nagyon hasznos generálására adatalapú listákat. Akkor majd csatolja a törlés gombra kattintva felvezető minden elem a listán keresztül jQuery (élő) , és hívja a szerver oldali törölni módszer, hogy távolítsa el az adatbázisban.

A lista frissítéséhez törlése után, csak újra létrehozza a listát a sablon már megadott.

Válaszolt 12/06/2011 14:33
a forrás felhasználó

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more