Question

这里的问题是，当我添加用户并对其进行编辑时，它一直有效到我的第四次尝试。之后卡住了，不起作用。可能是什么原因？这是我的html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Add Table Rows</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <table id="tablo">
        <thead>
            <tr>
                <th id="tab">Name</th>
                 <td>
                    <input style="background-color:green; color: white; width: 103px" type="button" class="add" value="Əlavə+">
                </td>
            </tr>
            <tr hidden id="td">
                <td>
                    <input type="text" style='width:250px'  id="name">
                </td>
                <td>
                   <span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>
                </td>
            </tr>
        </thead>
        <tbody><tr></tr></tbody>
    </table>

这是我的JavaScript：

<script>

    $(document).ready(function() {

        $(".add").click(function() {
            $("#td").show('');
        });

        $(".save").click(function() {
            var name = $("#name").val();
            var toplam = "<tr><td  style='width:250px'>" + name + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
            $("table tbody").append(toplam);
            var name = $("#name").val('');

            $('body').on('click', '.delete', function() {
                $(this).parents('tr').remove();
            });
            $("#td").hide();
        });

        $('body').on('click', '.edit', function() {
            var one = $(this).closest('tr').find('td:eq(0)').text(); 
            var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";

            $(this).parents('tr').html(edit);
              $(".save").click(function() {
                var value = $("#text2").val();

                var save= "<td  style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
                $(this).parents('tr').html(save);
            });
        });
    });
</script>

和一些强制使用的CSS样式。主要的问题是代码在编辑几次后实际上是可以工作的。它会在5-6个attemts之后停止添加一个空字段，如果有问题，您能看一下我的代码吗？

Answer 1

您一次又一次绑定事件。相反，您应该委派事件并将其置于其他事件之外：

$(document).ready(function() {

  $(".add").click(function() {
    $("#td").show();
  });
});// <------.ready closing.

$('body').on('click', '.delete', function() {
  $(this).parents('tr').remove();
});

$('body').on('click', '.edit', function() {
  var one = $(this).closest('tr').find('td:eq(0)').text();
  var edit = "<td><input type='text' style='width:250px' id='text2' value='" + one + "'></td><td><span class='saxla'><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span></td>";

  $(this).parents('tr').html(edit);
});

$('body').on('click', '.save', function() {
  var value = $("#text2").val();

  var save = "<td  style='width:250px'>" + value + "</td><td><span class='edit'><a class='fa fa-edit' href='javascript: void(0);'>edit</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
  $(this).parents('tr').html(save);

});

Answer 2

将$("#td").show('');更改为$("#td").show();

有关show()选项的更多信息，请参见： http://api.jquery.com/show/

第4次编辑后，jquery表字段不起作用

2 个答案: