Question

我有一个显示数据库条目的表。用户可以为每行打开一个弹出菜单。其中一个选项是删除数据库条目，表格应该通过AJAX调用进行相应刷新。

只要有人点击#delete-toggle中的table-popup，我就会在HTML页面上进行AJAX调用（table-popup是当有人点击{table-edit-button时出现的div表中每行中存在的表中的1}}：

  <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调用没有被执行。我必须刷新整个页面然后再次工作。

根据this question，我认为当我将所有.click更改为$(document).on('click')但未解决此问题时，我会将其修复。如您所见，所有相关部分都是这样的。将cache: false添加到AJAX调用中也没有修复它。

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内容。早些时候我们使用直播但它已经过折旧，现在它被.on取代所以请使用.ON和你的ajax调用100％

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

3 个答案: