0

私はjqueryを初めて使用し、画像の追加または削除をクリックしてテーブル行を追加および削除したいと考えています。

追加ボタンは完全に機能し、削除ボタンを使用して手動で追加された行は完全に機能しますが、新しい行を追加してから新しい行の削除ボタンをクリックしても何も起こりません。

私はグーグルを検索してすべての答えをテストしようとしましたが、どれもうまくいかないようです。

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

2 に答える 2

4

委任を次のように使用します。

ただし、ID はコンテキスト ページで一意である必要があります。

 $(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();
     });
  });
于 2013-07-31T13:45:02.343 に答える
1

イベント委任が必要になります。これには on() メソッドを使用します。http://api.jquery.com/on/

于 2013-07-31T13:44:34.637 に答える