Question

我可以很好地添加用户，但是当我尝试删除或编辑某人时，我的按钮不起作用。我试图发出警报，看看有什么不对，但我找不到任何东西。

正如您所看到的，当您将某人添加到表格时，它会创建按钮删除和编辑。

这是我的js代码：

var nextId = 1;
var activeId = 0;
$(document).ready(function() {
    $("#addBtn").on("click", function() {
        var name = $("#txtNome").val();
        if (name.trim().length < 3 || $("#txtIdade").val() == "") {
            alert("Dados Incorretos, Por favor, digite o seu nome e idade.");
            $("#txtNome").focus();
            return false;
        } else {
            addt();
            formClear();
        }
    });
    $("#btnDelete").on("click", function(delete_button) {
        $(delete_button).parents("tr").remove();
    });
    $("#btnEdit").click(function() {
        var row = $(edit_button).parents("tr");
        var cols = row.children("td");
        activeId = $($(cols[2]).children("button")[0]).data("id");
        $("#txtNome").val($(cols[0]).text());
        $("#txtIdade").val($(cols[1]).text());
        $("#edt").css("display", "inline-block");
        $("#addBtn").prop("disabled", true);
    })
    function addt() {
        if ($("#tblUser tbody").length == 0) {
            $("#tblUser").append("<tbody></tbody>");
        }
        $("#tblUser tbody").append(addUserToTable(nextId));
        nextId += 1;
    }
    function addUserToTable(id) {
        var row =
            "<tr>" +
            "<td>" + $("#txtNome").val() + "</td>" +
            "<td>" + $("#txtIdade").val() + "</td>" +
            "<td>" +
            "<button type='button' style='margin-right:20px;' " + "id='btnEdit' " + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-edit'></span>" +
            "</button>" +

            "<button type='button' " + "id='btnDelete'" + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-remove'></span>" +
            "</button>" +
            "</td>" +
            "</tr>"
        return row;
        nextId += 1;
    }
    function formClear() {
        $("#txtNome").val("");
        $("#txtIdade").val("");
    }
    function attTable(id) {
        var row = $("#tblUser button[data-id='" + id + "']").parents("tr")[0];
        $(row).after(addUserToTable());
        $(row).remove();
        formClear();
        $("#edt").css("display", "none");
    }
});

Answer 1

当您将String内容（以HTML格式）添加到表中时，因此这些是文档的新内容，并且Jquery在页面加载时绑定了所有事件，

因此，当您向表中添加动态内容时，您明确需要将事件绑定到DOM元素（在您的情况下编辑和删除按钮）

请尝试以下代码，

<script>
var nextId = 1;
var activeId = 0;

$(document).ready(function(){


    $("#addBtn").on("click",function(){
        var name = $("#txtNome").val();
        if (name.trim().length < 3 || $("#txtIdade").val() == "") {
            alert("Dados Incorretos, Por favor, digite o seu nome e idade.");
            $("#txtNome").focus();
            return false;
        } else {
            addt();
            formClear();
        }
    });


    $("#btnDelete").on("click",deletebutton);


    function deletebutton(){
        $(this).parents("tr").remove();
    }

    $("#btnEdit").click(editButton);

    function editButton(){

        var row = $(this).parents("tr");
        var cols = row.children("td");

        activeId = $($(cols[2]).children("button")[0]).data("id");

        $("#txtNome").val($(cols[0]).text());
        $("#txtIdade").val($(cols[1]).text());

        $("#edt").css("display", "inline-block");
        $("#addBtn").prop("disabled" , true);


    }
    function addt(){
        if ($("#tblUser tbody").length == 0) {
            $("#tblUser").append("<tbody></tbody>");
        }
        var btn = $(addUserToTable(nextId));
        $(btn).find("#btnEdit").bind('click', editButton);
        $(btn).find("#btnDelete").bind('click', deletebutton);
        $("#tblUser tbody").append($(btn));
        nextId += 1;
    }

    function addUserToTable(id) {

        var row =
        "<tr>" +
        "<td>" + $("#txtNome").val() + "</td>" +
        "<td>" + $("#txtIdade").val() + "</td>" +
        "<td>" +
        "<button type='button' style='margin-right:20px;' " +       "id='btnEdit' " + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-edit'></span>" +
              "Edit </button>" +

              "<button type='button' " + "id='btnDelete'" + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-remove'></span>" +
              "Delete</button>" +
              "</td>" +

              "</tr>"

          return row;


          nextId += 1;

      }

      function formClear() {
          $("#txtNome").val("");
          $("#txtIdade").val("");
      }


      function attTable(id) {
        var row = $("#tblUser button[data-id='" + id + "']").parents("tr")[0];


          $(row).after(addUserToTable());

          $(row).remove();

          formClear();

          $("#edt").css("display", "none");
      }


}); 
</script>

我希望这能解决你的问题

我尝试过以下HTML内容

<table id="tblUser"></table>

<input type="button" id="addBtn" value="addBtn"/><br/>
<input type="button" id="btnDelete" value="btnDelete"/><br/>
<input type="button" id="btnEdit" value="btnEdit"/><br/>
txtNome: <input type="text" id="txtNome" value="Name 1" /><br/>
txtIdade: <input type="text" id="txtIdade" value="Name 2"/><br/>

Javascript按钮删除和编辑

1 个答案: