在元素单击模式时，第一次弹出，但不是第二次

Question

我有一个使用Ajax动态填充数据的表。

我添加了一个编辑按钮，以便我可以编辑数据。单击编辑按钮时，将出现一个模式，并且在提交时，数据将更新。第一次点击工作正常。模态弹出并消失。但是当我第二次单击编辑图标时。什么也没发生。

我尝试搜索并将我的函数放在 $(function(( {} 下，但这不起作用。

<table class="table table-striped table-bordered" id="TasksTable">
        <thead>
            <tr>
                <th scope="col">Task #</th>
                <th scope="col">Name</th>
                <th scope="col">Due Date</th>
                <th scope="col">Status</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>

function showTables() {
        $.ajax({
            url: '<?php echo site_url() ?>TaskController/showTasks',
            method: 'POST',
            dataType: 'json',
            async: false,
            success: function(data) {
                var html = '';
                var i;
                if (data.length == 0) {
                    $('#TaskCount').html('<p class="text-warning text- 
center">Hooray! No tasks Left. Consider Taking a break OR Adding new 
Tasks</p>');
                }
                for (i = 0; i < data.length; i++) {
                    html += '<tr>' +
                        '<td>' + (i + 1) + '</td>' +
                        '<td>' + data[i].task_name + '</td>' +
                        '<td>' + data[i].task_date + '</td>' +
                        '<td>' + data[i].task_status + '</td>' +
                        '<td><div class="custom-control custom-checkbox d- 
inline pr-3"><input type="checkbox" name="chkboxes" class="custom-control- 
input" data="' + data[i].task_id + '" id="customCheck' + data[i].task_id + 
'"><label class="custom-control-label" for="customCheck' + data[i].task_id 
+ '"></label></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img 
class="editicon" data="' + data[i].task_id + '" src="<?php echo base_url() 
?>images/edit.png" width="17px;" style="vertical-align: unset;"></td>' +
                        '</tr>';
                }
                $('#tableBody').html(html);
            },
            error: function() {
                console.log("Error Fetching Data");
            }
        });
    }

$(function() {
        showTables();
        // $('#tableBody').on('click','.editicon', function() {
            $('.editicon').on('click', function() {
            console.log('click');
            // Display Form to update form and update data
            var taskId = $(this).attr('data');
            console.log(taskId);
            $('#editTaskModal').modal('show');
            $.ajax({
                url: '<?php echo base_url()? 
>TaskController/fetchTaskByID',
                method: 'POST',
                data: {
                    taskId: taskId
                },
                dataType: 'json',
                async: false,
                success: function(data) {
                    $('#editTaskID').val(taskId);
                    $('#editTaskName').val(data[0].task_name);
                    $('#editTaskDate').val(data[0].task_date);
                },
                error: function() {
                    console.log('Can't update status');
                }
            });
        });
    });
    $('#editTaskForm').on('submit', function(e) {
        e.preventDefault();
        var taskID = $('#editTaskID').val();
        var taskName = $('#editTaskName').val();
        var taskDate = $('#editTaskDate').val();

        $.ajax({
            url: '<?php echo site_url() ?>TaskController/UpdateTask',
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            dataType: 'json',
            async: false,
            success: function(data) {
                $('#editTaskModal').modal('hide');
                $('#editTaskForm')[0].reset();
                showTables();
            },
            error: function() {
                alert('Error');
            }
        })
    });

Answer 1

我无法完全复制您的问题。这是一个动态添加数据的基本示例，我可以看到单击事件在单击多次时会多次触发。

$(function() {
  var siteUrl = "<?php echo site_url() ?>";
  var exData = {
    task_id: 100,
    task_name: "Example Task",
    task_date: "01/01/1970",
    task_status: "Completed"
  }
  function addTask(tObj, ind, rData) {
    var newRow = $("<tr>").appendTo(tObj);
    $("<td>").html(ind).appendTo(newRow);
    $("<td>").html(rData.task_name).appendTo(newRow);
    $("<td>").html(rData.task_date).appendTo(newRow);
    $("<td>").html(rData.task_status).appendTo(newRow);
    var task = $("<td>").appendTo(newRow);
    $("<div>", {
      class: "custom-control custom-checkbox d-inline pr-3"
    }).appendTo(task);
    $("<input>", {
      type: "checkbox",
      name: "chkboxes" + rData.task_id,
      id: "customCheck" + rData.task_id
    }).appendTo($("div", task));
    $("<label>", {
      class: "custom-control-label",
      for: "customCheck" + rData.task_id
    }).appendTo($("div", task));
    $("<img>", {
      class: "editicon",
      src: siteUrl + "images/edit.png",
    }).data("task-id", rData.task_id).css({
      width: "17px",
      "vertical-align": "unset"
    }).appendTo(task);
    return newRow;
  }
  function showTables() {
    $.ajax({
      url: siteUrl + 'TaskController/showTasks',
      method: 'POST',
      dataType: 'json',
      async: false,
      success: function(data) {
        var html = '';
        var table = $("#tableBody");
        if (data.length == 0) {
          $('#TaskCount').html('<p class="text-warning text-center">Hooray! No tasks Left. Consider Taking a break OR Adding new Tasks </p>');
        } else {
          $.each(data, function(i, d) {
            addTask(table, i + 1, d);
          });
        }
      },
      error: function() {
        console.log("Error Fetching Data");
      }
    });
  }
  addTask($("#tableBody"), 0, exData);
  showTables();
  $('.editicon').on('click', function() {
    console.log('click');
    // Display Form to update form and update data
    var taskId = $(this).data("task-id");
    console.log(taskId);
    $('#editTaskModal').modal('show');
    $.ajax({
      url: siteUrl + 'TaskController/fetchTaskByID',
      method: 'POST',
      data: {
        taskId: taskId
      },
      dataType: 'json',
      async: false,
      success: function(data) {
        $('#editTaskID').val(taskId);
        $('#editTaskName').val(data[0].task_name);
        $('#editTaskDate').val(data[0].task_date);
      },
      error: function() {
        console.log('Can't update status');
      }
    });
  });
  $('#editTaskForm').on('submit', function(e) {
    e.preventDefault();
    var taskID = $('#editTaskID').val();
    var taskName = $('#editTaskName').val();
    var taskDate = $('#editTaskDate').val();
    $.ajax({
      url: siteUrl + 'TaskController/UpdateTask',
      method: 'POST',
      data: new FormData(this),
      processData: false,
      contentType: false,
      dataType: 'json',
      async: false,
      success: function(data) {
        $('#editTaskModal').modal('hide');
        $('#editTaskForm')[0].reset();
        showTables();
      },
      error: function() {
        alert('Error');
      }
    })
  });
});

.d-inline {
  display: inline-block;
}
.custom-checkbox {
  margin-right: 7em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered" id="TasksTable">
  <thead>
    <tr>
      <th scope="col">Task #</th>
      <th scope="col">Name</th>
      <th scope="col">Due Date</th>
      <th scope="col">Status</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>

我做了很多小的清理，以确保HTML语法是正确的。由于我不确定开始和结束标签，我将创建切换到jQuery。我还将其移至它自己的功能，因此更容易处理。

我猜这个问题与您的模态以及它如何"关闭"或删除有关。例如，如果未正确删除，则可能会阻止单击事件。