title: Click event not working in javascript
body: <p>I Follow This <a href="http://mrbool.com/creating-a-crud-form-with-html5-local-storage-and-json/26719" rel="nofollow noreferrer">Article</a> for Impalement CRUD Operation with HTML5 and Javascript.</p>
  
  <p>So that Submit Data to <a href="http://www.w3schools.com/html/html5_webstorage.asp" rel="nofollow noreferrer">Local Storage</a> and save it.</p>
  
  <p>my problem is Delete and Edit Operation when clicking on delete and edit button    Nothing happens.</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(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 &lt; cli.length; i++) {
        debugger;
        div.append(
          '&lt;div href="#" class="list-group-item list-group-item-action flex-column align-items-start"&gt;' +
          '&lt;div class="d-flex w-100 justify-content-between"&gt;' +
          ' &lt;h5 class="mb-1"&gt;' + cli[i].ExternalProjects.Name + '&lt;/h5&gt;' +
          '  &lt;small&gt;' +
          '&lt;a id="btnDelete"  alt="Delete' + i + '"&gt;&lt;i class="fa fa-trash" style="cursor: pointer" &gt;&lt;/i&gt;&lt;/a&gt;' +
          '&lt;a id="btnEdit" alt="Edite' + i + '"&gt;&lt;i class="fa fa-pencil" style="cursor: pointer"&gt;&lt;/i&gt;&lt;/a&gt;'
          + '&lt;/small&gt;' +
          ' &lt;/div&gt;' +
          '&lt;p class="mb-1"&gt;' + cli[i].ExternalProjects.Body + '&lt;/p&gt;' +
          '&lt;small&gt;' + cli[i].ExternalProjects.Url + '&lt;/small&gt;' +
          '&lt;/div&gt;'
        );
      }
    }
  
    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();
      }
    });
  });
  </code></pre>