Kann nicht gelöscht werden dynamisch hinzugefügte Zeile in der Tabelle

Ich bin ziemlich neu bei jquery und ich möchte hinzufügen und löschen von Tabellenzeilen, die durch
klicken auf die hinzufügen oder entfernen von Bild.

Den hinzufügen-button funktioniert perfekt und eine manuell hinzugefügte Zeile mit dem löschen-button funktioniert perfekt, aber wenn ich eine neue Zeile hinzuzufügen, und klicken Sie dann auf die Schaltfläche löschen für die neue Zeile, es tut sich nix.

Habe ich versucht google-Suche und-Prüfung alle Antworten, aber keiner scheint für mich arbeiten.

    <script type="text/javascript">
            $(document).ready(function(){
                    var idCount = 0;
                    idCount++;
                    var new_row="<tr><td><span style='float:left; margin-left:20px;'>IP:&nbsp;</span><input name='ipaddr' type='text' /></td><td><img src='images/delete.png' width='20px' height='20px' id='deleteRow' /></td></tr>";
                    $("table#ipList img#addRow").click(function() {
                            $("table#ipList").append(new_row);
                    });
                    $("table#ipList img#deleteRow").click(function() {
                            //$("img#deleteRow").parents("tr").remove();
                            //$("img#deleteRow").parent().parent().last().remove();
                            $("img#deleteRow").last().parent().parent().remove();
                    });
            });
    </script>
    </head>
    <body>
    <table id="ipList">
            <tr>
                    <td><span style="float:left; margin-left:20px;">IP:&nbsp;</span><input name="ipaddr" type="text" /></td>
                    <td><img src="images/add.png" width="20px" height="20px" id="addRow" /></td>
            </tr>
            <tr>
                    <td><span style="float:left; margin-left:20px;">IP:&nbsp;</span><input name="ipaddr" type="text" /></td>
                    <td><img src="images/delete.png" width="20px" height="20px" id="deleteRow" /></td>
            </tr>
    </table>
  • warum haben Sie var new_row kommentiert?
  • Und auch, wenn die ID ' s sind einzigartig, Sie brauchen nicht table#ipList img#addRow, #addRow genug sein würde.
InformationsquelleAutor Sayajin | 2013-07-31
  1. 4

    Delegierung verwenden, auf diese Weise:

    Aber-IDs eindeutig sein müssen, auf die Kontext-Seite!

     $(document).ready(function () {
     var idCount = 0;
     idCount++;
     $("#ipList").on('click', "#addRow", function () {
         $("#ipList").append(new_row);
     });
     $("#ipList").on('click', "#deleteRow", function () {
         $("#deleteRow").closest('tr').remove();
     });
  });
    • wow vielen Dank, das funktioniert wie ein Charme 🙂 Eine Letzte Frage, wie könnte ich anfügen idCount, um die neuen Eingänge.Klasse.
    InformationsquelleAutor A. Wolff
  2. 1

    Sind Sie gehen zu müssen, event delegation. Verwenden Sie die on () - Methode für diese. http://api.jquery.com/on/

    InformationsquelleAutor Tdelang
Schreibe einen Kommentar