jquery click event not firing after ajax event

Question

I am having trouble getting my button to click after an ajax call. It works fine before the call. However, when i perform a search and return the data from php, the click event stops working.

I have tried the .on event but this just display the form and not the values. I would be grateful if someone could check my code and see where I am going wrong.

I am aware that the element needs to be in the page and I assumed that after he ajax call the dom would contain the element. Obvously i was wrong.

Many thanks

Order of clicks.

1) page load, .edit click works fine.

2) perform search from #btn-search. Pagintes the table but .edit click is no longer firing.

js code

Get inital values from row. works fine on first click. Not after ajax call to display search results

$(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 backend

<?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 search click event

$(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

Probably you need event delegation

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

Resource

• Event delegation .on()