Question

我目前遇到的问题是，一旦我通过php从我的sql表中删除一行，我希望表刷新以显示五个结果，而不是由于删除而显示四个结果。所以我设法做的是将消息传递给我的sql数据库，然后使用jQuery刷新div框。但是，一旦我通过.load（）刷新div，控件就会停止工作。

这是一个JSFiddle我无法完全复制我的问题但是发生了什么是我无法再点击我的'设置'小部件，jquery一旦重新初始化div框就停止工作。< / p>

我为无法展示正确的例子道歉，但我希望JSFiddle能帮助您理解我所说的内容。

停止运作的是以下代码：

$(".controlTd").click(function () {
  $(this).children(".settingsIcons").toggleClass("display"); 
  $(this).children(".settingsIcon").toggleClass("openIcon"); 
});

注意： 重新加载div框时，控制台日志显示没有错误，我尝试单击设置小部件删除行。

实际页面

<div id="softLeft">
<div id="leftBox">

  <table class="flatTable">
      <tr class="headingTr">
        <td>Date</td>
        <td>Address</td>
        <td>Name</td>
        <td>Phone</td>
        <td>Email</td>
        <td></td>
      </tr>
      <?php
$qry = "SELECT * FROM table WHERE filled='0' ORDER BY date ASC, name ASC LIMIT 5";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $qry);
while($row = mysqli_fetch_assoc($result)){
    echo (
    '<tr class="mshift '.$row['code'].'">
    <td>'.$row['date'].'</td>
    <td>'.$row['address'].'</td>
    <td>'.$row['name'].'</td>
    <td>'.$row['phone'].'</td>
    <td>'.$row['email'].'</td>
    <td class="controlTd">
        <div class="settingsIcons">
            <span class="settingsIcon"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
            <span class="settingsIcon" onclick="deleteRow(&quot;'.$row['code'].'&quot;)">Delete</span>
            <div class="settingsIcon" onclick="editRow(&quot;'.$row['code'].'&quot;)">Edit</div>
            <div class="settingsIcon" onclick="fillRow(&quot;'.$row['code'].'&quot;)">Fill</div>
        </div> 
    </td>
    </tr>
</table>
</div>
</div>)'

file.php

$code         = filter_var($_POST["code"], FILTER_SANITIZE_STRING);
$login        = $_SESSION['SESS_CONTROL_LOGIN'];

//proceed with PHP mysqli Query.

$qry = "DELETE FROM shifts WHERE code = '$code'";
//Check whether the query was successful or not
$result = @mysqli_query($GLOBALS["___mysqli_ston"], $qry);
if(!$result)
{
    $output = json_encode(array('type'=>'error', 'text' => "Error! Could not delete data entry."));
    die($output);
}else{
    $output = json_encode(array('type'=>'message', 'text' => 'Data entry removed.'));
    die($output);
}

Answer 1

问题出在这里！

$(this).children(".settingsIcon").toggleClass("openIcon");

现在span不是td的直接子节点，因此你不能使用$（this）.children（＆＃34; .settingsIcon＆＃34;）。你可以这样做 -

$(".controlTd").click(function () {
  var span=$(this).children(".settingsIcons");
  span.toggleClass("display"); 
  span.children(".settingsIcon").toggleClass("openIcon"); 
});

Answer 2

试试这个：

$(document).on('click', ".controlTd', function(){

  $(this).children(".settingsIcons").toggleClass("display"); 
  $(this).children(".settingsIcon").toggleClass("openIcon");
});

我猜你正在使用的控件或代码替换了.controlTd DOM元素，之后没有附加事件处理程序。您可以使用event delegation来解决此问题。

顺便说一句，使用＆＃39;这个＆＃39;在回调函数中不是一个好主意，因为＆＃39;这个＆＃39;将始终指向回调函数中的根对象，即窗口。这就是您的代码第一次工作的原因。这个＆＃39;没有继承或关闭。关键词。

在您的控制台中运行此代码：

var myObj = {
    p1: 'fdsfds',
    func1: function() {
        setTimeout(function() {
            console.log(this === window);
        }, 100);
    }
};
myObj.func1();

Answer 3

试试这个：

$(".controlTd").on('click', function(){
   $(this).children(".settingsIcons").toggleClass("display"); 
   $(this).children(".settingsIcon").toggleClass("openIcon"); 
});

Answer 4

因为我无法得到答案，所以我提出了另一种选择。我将我的表脚本清空到一个单独的文档上，并使用jquery将该内容加载到我的div leftBox上。在表格页面上，我包含了允许管理控件选项的jquery，从而确保表和脚本都以相同的速度启动，并且我也在页面上包含了自动刷新。

<强> Home.php

  <div id="leftBox">

  </div>
<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#leftBox').load('TableData.php', function(){
           setTimeout(refreshTable, 5000);
        });
    }
function deleteRow(code) {
        var proceed = true;
        if (proceed) {
            post_data = {'code': code};
            $.post('Delete.php', post_data, function (response) {
                if (response.type == 'error') {
                    output = '<div class="error">' + response.text + '</div>';
                } else {
                    output = '<div class="success">' + response.text + '</div>';
                }
                if (response.type == 'error') {
                    $("#result").hide().html(output).slideDown();
                }
                else {
                    refreshTable();
                    $("#result").hide().html(output).slideDown();


                }
            }, 'json');
        }
    };
</script>

<强> TableData.php

    <h2 style="color: rgba(255, 255, 255, 1);
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);">Unfilled Shifts</h2>
    <table class="flatTable">
      <tr class="headingTr">
        <td>Date</td>
        <td>Location</td>
        <td>Caller</td>
        <td>Time In</td>
        <td>Time Out</td>
        <td></td>
      </tr>
      <?php
$qry = "SELECT * FROM table WHERE filled='0' ORDER BY date ASC, name ASC LIMIT 5";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $qry);
while($row = mysqli_fetch_assoc($result)){
    echo (
    '<tr class="mshift '.$row['code'].'">
    <td>'.$row['date'].'</td>
    <td>'.$row['address'].'</td>
    <td>'.$row['name'].'</td>
    <td>'.$row['phone'].'</td>
    <td>'.$row['email'].'</td>
    <td class="controlTd">
        <div class="settingsIcons">
            <span class="settingsIcon"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
            <span class="settingsIcon" onclick="deleteRow(&quot;'.$row['code'].'&quot;)">Delete</span>
            <div class="settingsIcon" onclick="editRow(&quot;'.$row['code'].'&quot;)">Edit</div>
            <div class="settingsIcon" onclick="fillRow(&quot;'.$row['code'].'&quot;)">Fill</div>
        </div> 
    </td>
    </tr>
</table>
      <script>
$(document).ready(function () {
$(".controlTd").click(function () {
  var span=$(this).children(".settingsIcons");
  span.toggleClass("display"); 
  span.children(".settingsIcon").toggleClass("openIcon"); 
}); 
});
</script>

脚本在.load（）之后停止工作

4 个答案: