ajax事件后jQuery单击事件未触发

Question

我无法在 ajax 调用后点击按钮。在通话之前它工作正常。但是，当我执行搜索并从 php 返回数据时，单击事件停止工作。

我已经尝试过 .on 事件，但这只是显示表单而不是值。如果有人能检查我的代码并看看我哪里出错了，我将不胜感激。

我知道该元素需要在页面中，并且我假设在他调用 ajax 之后 dom 将包含该元素。显然我错了。

非常感谢

点击顺序。

1) 页面加载，.edit 点击工作正常。

2) 从#btn-search 执行搜索。对表格进行分页，但 .edit 单击不再触发。

js代码

从行中获取初始值。在第一次点击时工作正常。不是在ajax调用后显示搜索结果

$(function() {
  $('.edit').click(function(e) {
    e.preventDefault();
    // code to read selected table row cell data (values).
    var currentRow = $(this).closest("tr");
    id = currentRow.find("td:eq(0)").html();
    service = currentRow.find("td:eq(1)").html();
    activity = currentRow.find("td:eq(2)").html();
    dept = currentRow.find("td:eq(3)").html();
    company = currentRow.find("td:eq(4)").html();
    address = currentRow.find("td:eq(5)").html();
    user = currentRow.find("td:eq(6)").html();
    item = currentRow.find("td:eq(7)").html();
    date = currentRow.find("td:eq(8)").html();
    var data = id + "\n" + service + "\n" + activity + "\n" + dept + "\n" + company + "\n" + address + "\n" + user + "\n" + item + "\n" + date;
    $("#editForm").dialog("open");
    $("#id").val(id);
    $("#service").val(service);
    $("#activity").val(activity);
    $("#dept").val(dept);
    $("#company").val(company);
    $("#address").val(address);
    $("#user").val(user);
    $("#item").val(item);
    $("#datetimepicker").val(date);
  });
});

php后端

<?php 
if ($_POST['search1'] == '') {
  echo 'enter a search term';
  exit;
} else {
  $search = $_POST['search1'];
  $sqlsrch = mysqli_query($conn, "select * from act where item like '%$search%'");
  $numsrch = mysqli_num_rows($sqlsrch);
  if ($numsrch == 0) {
    // what to do if no results found
    echo 'No Results Found';
  } else {
    while ($rowsrch = mysqli_fetch_array($sqlsrch)) {
      $id = $rowsrch['id'];
      $service = $rowsrch['service'];
      $activity = $rowsrch['activity'];
      $dept = $rowsrch['department'];
      $company = $rowsrch['company'];
      $address = $rowsrch['address'];
      $user = $rowsrch['user'];
      $box = $rowsrch['item'];
      $date = $rowsrch['date'];
      $date = date('d/m/Y h:i:s', strtotime($date));
      $edit = "<button type='button' class='btn btn-primary edit'>Edit</button>";
      $action = "<button type='button' class='btn btn-success action'>Action</button>";
      $delete = "<button type='button' class='btn btn-danger delete'>Delete</button>";
      // Now for each looped row
      echo "<tr><td>" . $id . "</td><td>" . $service . "</td><td>" . $activity . "</td><td>" . $dept . "</td><td>" . $company . "</td><td>" . $address . "</td><td>" . $user . "</td><td>" . $box . "</td><td>" . $date . "</td><td>" . $edit . ' ' . $action . ' ' . $delete . "</td></tr>";
    } // End our scale while loop
  }
}
?>

jquery 搜索点击事件

$(function() {
  $('#btn-search').on('click', function(e) {
    e.preventDefault();
    var search = $("#search").val();
    $.ajax({
      url: "tabletestajax.php",
      method: 'POST',
      data: {
        search1: search
      },
      success: function(data) {
        $("#search").val('');
        $(".paginated tbody").empty();
        var result = $.trim(data);
        if (result === "enter a search term") {
          $("input[name='search']").val(result).css({
            'color': 'red'
          });
          return false;
        } else if (result === "No Results Found") {
          $(".paginated tbody").html('<div>' + result + '</div>');
          return false;
        } else {
          $(".paginated tbody").html(result);
        }
      }
    });
  });
});

Answer 1

可能你需要事件委托

$(document).on('click', '.edit', function(e) {
  e.preventDefault();
  // code to read selected table row cell data (values).
  var currentRow = $(this).closest("tr");
  id = currentRow.find("td:eq(0)").html();
  .
  .
}

资源

• Event delegation .on()