AJAX调用只能与$（document）.on（'click'）一起使用

Question

我有一个显示数据库条目的表。 用户能够为每一行打开一个弹出菜单。 选项之一是删除数据库条目，并且该表应通过AJAX调用相应地刷新。

只要有人点击table-popup的#delete-toggle ，我就会在HTML页面上进行AJAX调用（ table-popup是当有人单击现有table-edit-button中的表格table-edit-button时显示的div在表格的每一行中）：

  <div class="table-popup">
    <ul>
      <li id="edit-toggle">Bearbeiten</li>
      <li id="favorite-toggle">Zu Favoriten hinzufügen</li>
      <li>Datei öffnen</li>
      <li>Im Ordner öffnen</li>
      <li id="delete-toggle">Löschen</li>
    </ul>
  </div>

  <div class="main-content">
    <h2 class="main-content-header">Datenbank</h2>
    <div id="table">
      <table>
        <thead>
          <tr class="table-row" tabindex="1">
            <th class="fixed-header"></th>
            <th>Dateiname</th>
            <th>Benutzer</th>
            <th>Erstelldatum</th>
            <th>Änderungsdatum</th>
            <th>Erste Zeile</th>
            <th>Kategorie</th>
            <th>Projekt</th>
          </tr>
        </thead>
        <?php
        include_once('connect.php');
        $result = $connect->query("SELECT file.name AS 'filename', file.description AS 'filedescription', category.name AS 'categoryname', project.name AS 'projectname', user.name AS 'username', idFile
          FROM file, category, project, file_has_project, file_has_category, user, user_has_project, user_has_category
          WHERE file.idFile = file_has_project.file_idFile AND file_has_project.project_idProject = project.idProject AND file.idFile = file_has_category.file_idFile AND file_has_category.category_idCategory = category.idCategory AND user.idUser = user_has_project.user_idUser AND user_has_project.project_idProject = project.idProject AND user.idUser = user_has_category.user_idUser AND user_has_category.category_idCategory = category.idCategory AND user.idUser = '".$_SESSION['userid']."'
          ORDER BY file.name ASC");
        if ($result->num_rows > 0) {
          echo "<tbody>";
          while($row = $result->fetch_assoc()) {
            echo "<tr class='".$row['idFile']." table-row' tabindex='1'>";
            echo "<th class='table-edit-button fixed-header'><img src='images/open.gif' /></th>";
            echo "<td>".$row['filename']."</td>";
            echo "<td>".$row['username']."</td>";
            echo "<td>-</td>";
            echo "<td>-</td>";
            echo "<td>".$row['filedescription']."</td>";
            echo "<td>".$row['categoryname']."</td>";
            echo "<td>".$row['projectname']."</td>";
            echo "</tr>";
          }
          echo "</tbody>";
        }
        ?>
      </table>
    </div>
  </div>

这是执行AJAX调用的函数：

$(document).ready(function() {
  var fileID, fileName, fileDescription, fileCategory, fileProject, projectID, categoryID;
  $('.table-edit-button').click(function() {
    fileID = $(this).parent().attr('class').split(' ')[0];
  });

  //Delete file entries
  $(document).on("click", "#delete-toggle", function() {
    $.ajax({
      cache: false,
      url: 'ajax-delete.php',
      type: 'post',
      data: { fileID : fileID, deleteID : 'indexFile' },
      success: function(data) {
        $('.main-content').html(data);
      }
    });
  });
});

这是接收AJAX调用的页面：

<?php
session_start();
include_once('connect.php');

if ($_POST['deleteID'] == 'indexFile') {
  $connect->query("DELETE FROM file_has_project WHERE file_idFile = '".$_POST['fileID']."'");
  $connect->query("DELETE FROM file_has_category WHERE file_idFile = '".$_POST['fileID']."'");
  $connect->query("DELETE FROM file WHERE idFile ='".$_POST['fileID']."'");

  echo '<h2 class="main-content-header">Datenbank</h2>
  <div id="table">
    <table>
      <thead>
        <tr class="table-row" tabindex="1">
          <th class="fixed-header"></th>
          <th>Dateiname</th>
          <th>Benutzer</th>
          <th>Erstelldatum</th>
          <th>Änderungsdatum</th>
          <th>Erste Zeile</th>
          <th>Kategorie</th>
          <th>Projekt</th>
        </tr>
      </thead>';
      $result = $connect->query("SELECT file.name AS 'filename', file.description AS 'filedescription', category.name AS 'categoryname', project.name AS 'projectname', user.name AS 'username', idFile
        FROM file, category, project, file_has_project, file_has_category, user, user_has_project, user_has_category
        WHERE file.idFile = file_has_project.file_idFile AND file_has_project.project_idProject = project.idProject AND file.idFile = file_has_category.file_idFile AND file_has_category.category_idCategory = category.idCategory AND user.idUser = user_has_project.user_idUser AND user_has_project.project_idProject = project.idProject AND user.idUser = user_has_category.user_idUser AND user_has_category.category_idCategory = category.idCategory AND user.idUser = '".$_SESSION['userid']."'
        ORDER BY file.name ASC");
      if ($result->num_rows > 0) {
        echo "<tbody>";
        while($row = $result->fetch_assoc()) {
          echo "<tr class='".$row['idFile']." table-row' tabindex='1'>";
          echo "<th class='table-edit-button fixed-header'><img src='images/open.gif' /></th>";
          echo "<td>".$row['filename']."</td>";
          echo "<td>".$row['username']."</td>";
          echo "<td>-</td>";
          echo "<td>-</td>";
          echo "<td>".$row['filedescription']."</td>";
          echo "<td>".$row['categoryname']."</td>";
          echo "<td>".$row['projectname']."</td>";
          echo "</tr>";
        }
        echo "</tbody>";
      }
  echo "  </table>";
  echo "</div>";

  $connect->close();
}
?>

这是处理动画以显示table-popup的函数（包装在$(document).ready ）：

  function disablePopup() {
    $('.table-popup').hide(100);
  }

  function enablePopup(event) {
    event.stopPropagation();
    var buttonOffset = $(this).offset();
    $('.table-popup').css({
      top: buttonOffset.top + 10,
      left: buttonOffset.left +10
    });
    $('.table-popup').show(100);
  }

  //Disable Table Popup Menu
  $(document).on("click", disablePopup);

  //Enable Table Popup Menu
  $(document).on("click", ".table-edit-button", enablePopup);

我遇到的问题是，第一次执行时，一切都会按预期工作。 但是，当我想第二次不刷新整个页面时，它就不起作用了。 click事件被激发了，我用alert对其进行了测试，但未执行AJAX调用。 我必须刷新整个页面，然后它才能再次工作。

根据这个问题，我想，当我改变了所有的将它固定.click到$(document).on('click')但没有解决问题。 如您所见，所有相关部分都是这样。 并添加cache: false AJAX调用为cache: false也不解决该问题。

Answer 1

因为您已经绑定了文档上的编辑按钮，所以当用Ajax调用替换html表时，它们将不再绑定。 返回Ajax调用时，您需要使用事件委托或绑定按钮。

$('.table-edit-button').click(function() {

需要是

$(document).on("click", '.table-edit-button', function() {

Answer 2

在您的AJAX通话中，尝试以下操作，

//Delete file entries
$("#delete-toggle").on("click", function() {
 $.ajax({
   cache: false,
   url: 'ajax-delete.php',
   type: 'post',
   data: { fileID : fileID, deleteID : 'indexFile' },
   success: function(data) {
     $('.main-content').html(data);
   }
 });
});

Answer 3

当您在ajax内容中调用某些jquery事件处理程序时，则需要这样的代码

$(document).on("click", '.table-edit-button', function(){});

如果我们确实使用它，则不会出现页面或ajax内容中的问题。 之前我们使用live，但是它已贬值，现在通过.on替换，因此使用.ON和您的ajax调用可以工作100％