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％