JQuery - Access ID von IMG an die Tabelle für PHP-Skript

Question

Im Grunde habe ich eine Tabelle zeigt ein paar Zeilen mit einer Schaltfläche zum Löschen neben ihnen. Wenn jemand auf die Schaltfläche Löschen klickt, nehme ich die ID dieser Schaltfläche, übergebe sie an ein PHP-Skript, lösche den Datensatz aus der Datenbank und blende die Zeile dann aus der Seite aus. Hier ist der Code:

$(".remove-button").live('click', function(){ 
    var remove_ptype = encodeURIComponent($(this).attr("id")); 

    $.ajax({ 
     type: "POST", 
     dataType : "html", 
     url: "script.php", 
     data: "id of remove button goes here", 
     success: function(msg){ 
     //Do nothing 
     } 
     }); 
    $(this).parent().parent().fadeOut(500); 
    }); 

OK, nächster Schritt. Haben Sie auch eine Schaltfläche zum Hinzufügen, die einen Dialog öffnet, der dann ein Skript verarbeitet, einige Daten zurückgibt und eine weitere Zeile für die eingegebenen Daten anfügt. Dieses Skript gibt auch eine ID für die Löschschaltfläche zurück, die dann von dem obigen Code verwendet wird. Hier ist der anhängenden Code:

$("<tr>" + 
     "<td>" + unescape(name) + "</td>" + 
     "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + name_id + "\" class=\"remove-button\" width=\"20\">"+ "</td>" + 
     "</tr>").appendTo("#ptypes tbody"); 

Also das schön so weit funktioniert. Wenn ich jetzt versuche, diese neu hinzugefügte Zeile zu löschen, ohne die Seite zu aktualisieren, wird sie zwar vom Bildschirm entfernt, aber ich kann die ID dieser neu angehängten .remove-Schaltfläche nicht mehr abrufen und an mein PHP-Skript übergeben. Ich weiß, dass es möglich ist, wie ich es zuvor in anderen Anwendungen (wie Basecamp) gesehen habe. Kann mir also bitte jemand sagen, wie ich das erreichen kann?

FYI, ich bin mit JQuerUI das Dialogfeld zu erstellen, usw.

Vielen Dank für Ihre Hilfe!

---

NEBEN ORIGINAL MESSAGE

OK so wurde die ID in der Tat zeigt sich nicht. Ich muss es zeigen und es funktioniert, aber ich habe immer noch ein Problem. Hier ist der Code für meine JQuery:

$("#add-type-form").dialog({ 
          autoOpen: false, 
          height: 350, 
          width: 500, 
          modal: true, 
          buttons: { 
           "Add": function() { 
            var type_name = encodeURIComponent($('#type_name').attr('value')); 
            var type_id = ''; 
            if (type_name != "") { 
             //Submit form 
             $.ajax({ 
             type: "POST", 
             dataType : "html", 
             url: "script.php", 
             data: "f=1" + "& ff=2" + "MORE STUFF", 
             success: function(msg){ 
             types_id = msg; 
             } 
             }); 
             type_id = types_id; 
             //Append to display           
             $("<tr>" + 
               "<td>" + unescape(type_name) + "</td>" + 
               "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">"+ "</td>" + 
              "</tr>").appendTo("#ptypes tbody"); 
             $(this).dialog("close"); 
            }}, 
           Cancel: function() { 
            $(this).dialog("close"); 
           } 
          }, 
          close: function() { 
           allFields.val("").removeClass("ui-state-error"); 
          } 
         }); 

Das ist also ein jQueryUI diagloue, die im Grunde das Skript verarbeitet, liefert die ID, die ich möchte meinen img-Tag zuweisen. Das Problem ist, dass die Add-Taste aus irgendeinem Grund zweimal gedrückt werden muss. Wenn ich die Zeile entfernen, wo ich einen Wert meiner type_id varaible nach der Ajax-Funktion zuweisen, d.h .:

type_id = types_id; 

Ich kann nicht den Typ-ID erhalten. Bleibt die Zeile dort, muss die Schaltfläche Hinzufügen zweimal angeklickt werden. Ich bin mir nicht sicher, warum das passiert. Ich bin mir sicher, dass es mein Mangel an JS-Kenntnissen ist, also suche ich Hilfe, weil ich mit der Variablendeklaration an sich nichts falsch finde.

Danke nochmal!

Answer 1

Diese Frage scheint ziemlich im Zusammenhang mit, was Sie tun: jquery Find ID of dynamically generated tr tag

Der Code sieht wie folgt erwähnt, aber ich glaube, Sie es an Ihre Bedürfnisse neu schreiben können:

$("a[href='delete.php']").click(function(e){ 
    var tr = $(this).closest('tr'), 
     id = tr[0].id; 

    // Put your AJAX call here 
    $.post('/delete/' + id, function(){ 
     // Animate up, then remove 
     tr.slideUp(500, function(){ 
      tr.remove(); 
     }); 
    }); 

}); 

Wenn Sie Wenn Sie Chrome oder Firefox verwenden, können Sie sogar die id der Schaltfläche überhaupt sehen? Es könnte sein, dass es nicht einmal angehängt wird ...

Viel Glück!

Es sieht so aus, als ob Sie nicht auf eine Antwort auf Ihre Anfrage warten, weshalb Sie wahrscheinlich zweimal auf die Schaltfläche klicken müssen.Ich habe eine (hoffentlich arbeiten) Version des Skriptes gehackt zusammen, dass die Abfrage wartet vor dem Schließen Sie den Dialog zu beenden und all das andere Uhrwerk tun:

$("#add-type-form").dialog({ 
    autoOpen: false, 
    height: 350, 
    width: 500, 
    modal: true, 
    buttons: { 
     "Add": function() { 
      var type_name = encodeURIComponent($('#type_name').attr('value')); 
      var type_id = ''; 
      var this_old = $(this); // Because $(this) won't really work inside of a anonymous function, you have to back up the original $(this) to another variable. 

      if (type_name != "") { 
       //Submit form 
       $.ajax({ 
        type: "POST", 
        dataType: "html", 
        url: "script.php", 
        data: "f=1" + "& ff=2" + "MORE STUFF", 
        success: function(msg) { 
         types_id = msg; // I'm not exactly sure if you need these two lines, but I'll keep them here anyways. 
         type_id = types_id; 

         //Append to display           
         $("<tr>" + "<td>" + unescape(type_name) + "</td>" + "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">" + "</td>" + "</tr>").appendTo("#ptypes tbody"); 
         this_old.dialog("close"); 
        } 
       }); 
      } 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
    } 
}); 

Vielleicht würde das funktionieren?