AJAX调用只能与$(document).on('click')一起使用 - php

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

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

  <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调用中也无法解决。

php参考方案

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

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

需要是

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

将输入类型复选框关联到输入类型文本 - php

我有一个问题，我需要将输入类型复选框与输入类型文本关联。情况如下：从数据库中提取数据。 PK数据是复选框的值。当复选框选择输入类型的文本时，您可以在其中输入特定数字。现在的问题是，选中所有类型的复选框输入文本都会被激活。我希望通过选择复选框输入，仅启用与复选框相关联的输入。我的HTML代码（此代码创建一个输入复选框，并为数据库中的每个记录输入文本，而我要激活…

哪个更好的做法？从Jquery响应获取HTML - php

这只是一个问题，以了解人们如何以及如何做到这一点，但是假设用户向列表中添加了一些内容，完成后，它将运行下面的ajax并更新.user-stream-list$.ajax({ url: "user-stream-list.php", success: function(data){ $(".user-stream-list…

在laravel中应用ajax - javascript

我想在laravel 4.2中应用ajax。我想重定向到页面而不重新加载它。我已经尝试过使用window.loaction.href和window.loaction.assign了，但是它不起作用。这是我的文件Route.php //login+logout+auth Route::get('login','authentica…

将简单的javascript代码转换为c＃ - javascript

昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意，将javascript代码重写为c＃这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=�…

为什么我的注册表单可以在除Firefox之外的所有浏览器中使用？ - php

在这里可用：http://syllableapp.com/test基本上，在Safari，Chrome，Opera，Webkit Nightly等中，表单可以完美地按预期工作。但是，在Firefox中，提交时只是...不执行任何操作。为什么是这样？这是我的JavaScript：$(document).ready(function() { $('in…

推荐标签：, ,

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在看。自己强行看了两个月，全部给看完了。感觉这文笔也就我读初中的水平……而且写着国内的一些情况，外国人能理解吗？这书为什么会这么火？这水平我也可以去写呀[笑哭][笑哭][笑哭] 招商银行员工：可以写赶紧写一个啊，能拿科幻文学雨果奖。 包清白：哦 楼主：pei ！tui ！你也配姓龙 楼主：@赵龙王 呵呵 […]