javascript - 单击事件在 JavaScript 中不起作用

Question

我关注这个Article用于使用 HTML5 和 Javascript 执行 CRUD 操作。

以便将数据提交至Local Storage并保存。

我的问题是单击删除和编辑按钮时的删除和编辑操作没有任何反应。

Javascript

$(function () {
  var operation = "A";
  var selected_index = -1;
  var tbClients = localStorage.getItem("tbClients"); //Retrieve the stored data
  tbClients = JSON.parse(tbClients); //Converts string to object
  if (tbClients === null) //If there is no data, initialize an empty array
    tbClients = [];

  function Add() {
    debugger;
    var Data = {
      ExternalProjects: {
        Name: $('#Name').val(),
        Body: $('#Body').val(),
        Url: $('#Url').val()
      }
    };

    tbClients.push(Data);
    localStorage.setItem("tbClients", JSON.stringify(tbClients));
    alert("The data was saved.");
    List();
    return true;
  }

  function Edit() {
    tbClients[selected_index] = JSON.stringify({
      Name: $('#Name').val(),
      Body: $('#Body').val(),
      Url: $('#Url').val()
    }); //Alter the selected item on the table
    localStorage.setItem("tbClients", JSON.stringify(tbClients));
    operation = "A"; //Return to default value
    return true;
  }

  function List() {

    debugger;
    var div = $('div#ExProjectList');
    div.html("");
    var cli = tbClients;
    for (var i = 0; i < cli.length; i++) {
      debugger;
      div.append(
        '<div href="#" class="list-group-item list-group-item-action flex-column align-items-start">' +
        '<div class="d-flex w-100 justify-content-between">' +
        ' <h5 class="mb-1">' + cli[i].ExternalProjects.Name + '</h5>' +
        '  <small>' +
        '<a id="btnDelete"  alt="Delete' + i + '"><i class="fa fa-trash" style="cursor: pointer" ></i></a>' +
        '<a id="btnEdit" alt="Edite' + i + '"><i class="fa fa-pencil" style="cursor: pointer"></i></a>'
        + '</small>' +
        ' </div>' +
        '<p class="mb-1">' + cli[i].ExternalProjects.Body + '</p>' +
        '<small>' + cli[i].ExternalProjects.Url + '</small>' +
        '</div>'
      );
    }
  }

  function Delete() {
    tbClients.splice(selected_index, 1);
    localStorage.setItem("tbClients", JSON.stringify(tbClients));
  } 


  $('#btnDelete').bind('click', function() {
    selected_index = parseInt($(this).attr("alt").replace("Delete", ""));
    Delete();
    List();
  });

  $("#btnEdit").bind("click", function() {
    operation = "E";
    selected_index = parseInt($(this).attr("alt").replace("Edit", ""));
    var cli = JSON.parse(tbClients[selected_index]);
    $("#Name").val(cli.ExternalProjects.Name);
    $("#Body").val(cli.ExternalProjects.Body);
    $("#Url").val(cli.ExternalProjects.Url);
  });




  $("#AddExternalProject").click(function () {
    if (operation === "A"){
      return Add();
    }
    else{
      return Edit();
    }
  });
});

Answer 1

您正在动态创建 HTML，但没有将事件附加到元素。

而不是使用:

$('#btnDelete').bind('click', function() {
    selected_index = parseInt($(this).attr("alt").replace("Delete", ""));
    Delete();
    List();
});


$("#btnEdit").bind("click", function() {
    operation = "E";
    selected_index = parseInt($(this).attr("alt").replace("Edit", ""));
    var cli = JSON.parse(tbClients[selected_index]);
    $("#Name").val(cli.ExternalProjects.Name);
    $("#Body").val(cli.ExternalProjects.Body);
    $("#Url").val(cli.ExternalProjects.Url);
});

使用事件委托(delegate):

$("#ExProjectList").on("click", "#btnDelete", function() {

    selected_index = parseInt($(this).attr("alt").replace("Delete", ""));
    Delete();
    List();
});

$("#ExProjectList").on("click", "#btnEdit", function() {
    operation = "E";
    selected_index = parseInt($(this).attr("alt").replace("Edit", ""));
    var cli = JSON.parse(tbClients[selected_index]);
    $("#Name").val(cli.ExternalProjects.Name);
    $("#Body").val(cli.ExternalProjects.Body);
    $("#Url").val(cli.ExternalProjects.Url);
});