点击事件无法在javascript中运行

I Follow This Article for Impalement CRUD Operation with HTML5 and Javascript.

我使用HTML5和Javascript来跟踪本文的Impalement CRUD操作。

So that Submit Data to Local Storage and save it.

这样就可以将数据提交到本地存储并保存。

my problem is Delete and Edit Operation when clicking on delete and edit button Nothing happens.

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

Javascript

使用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();
    }
  });
});

2 个解决方案

#1

You are creating the HTML dynamically, but not attaching the event to the element.

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

Instead of using:

而不是使用：

$('#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);
});

Use event delegation:

使用事件委托：

$("#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);
});

#2

If you are binding any event to any html element, always bind inside

如果要将任何事件绑定到任何html元素，请始终绑定到内部

$(document).ready(function(){
//code here
});

Because if you add the script earlier before Dom Content is ready, in self calling function then those elements will not be available to bind the events.

因为如果在Dom Content准备就绪之前添加脚本，那么在自调用函数中，这些元素将无法绑定事件。