1

我创建了一个由 php 数据库查询填充的页面（所有行都从 MySQL 表中读取并以 HTML 格式写入表中）。jQuery AJAX 请求相同的 PHP 脚本在所有 10 秒内都会刷新当前表格内容。然后，此函数的返回值将用于更改表格 HTML 值。

表中有一些按钮。当它们被点击时，它们从打开切换到关闭（反之亦然），另一个 PHP 文件被 AJAX 调用，然后通过 shell 命令控制 433MHz 无线套接字。这 10 秒 ajax-refresh 的目的是使按钮与电源插座的实际状态（保存在 MySQL 数据库中）同步。

$(document).ready(function(){
  $(".toggle").click(function() {
    if($(this).hasClass("ein")) {
      $(this).removeClass("ein");
      $(this).html("aus");
      $.post("various/executeCode.php", {transmitted:true, id:$(this).attr('id'),  toggle:'0'}, function(result) {
      });
    } else {
      $(this).addClass("ein");
      $(this).html("ein");
      $.post("various/executeCode.php", {transmitted:true, id:$(this).attr('id'), toggle:'1'}, function(result) {
      });
     }
  });
});


window.setInterval("reloadPage()", 5000);
function reloadPage()
  {
    $.get('various/reloadPage.php', function(data) {
      $("#content").html(data);
  });
}

$stmt = $dbh->query("SELECT * FROM `funksteckdosen`");
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach($row as $r)
{  
  echo "<tr>";  
  echo "  <td>" . $r['name'] . "</td>";  
  echo "    <td><button id='" . $r['id'] . "' class='toggle" . ($r['toggle'] == 0 ? "" : " ein") . "'>"     
    . ($r['toggle'] == 0 ? "aus" : " ein") . "</button></td>";  
  echo "</tr>";
}

现在我遇到了以下问题：一旦页面第一次被 AJAX 刷新，按钮就会停止工作。Javascript 不再执行 click() 函数。这是为什么？问题 2：表的内容被删除并被新的替换。我是否可以以某种方式淡入新行（或按钮背景颜色），而不仅仅是显示它们？那将是最后的接触。

我希望你能理解我的解释。

4

2 回答 2

0

单击处理程序不再起作用，因为新按钮从未附加处理程序。当您附加这样的处理程序时：

$(".toggle").click(function() {

jQuery 所做的是找到所有当前存在的 .toggle元素，并为每个元素添加该函数作为处理程序。由于新的是稍后通过 AJAX 调用添加的，因此它们不包含在该集合中，因此永远不会附加该函数。

jQuery 解决这个问题的方式是使用.on()函数. 使用的结构非常相似：

$('body').on('.toggle', 'click', function() {

这里的区别是实际上将点击事件绑定到函数的元素。有了这个，点击事件实际上被添加到body标签中，这并没有从 AJAX 调用中改变。动态元素的任何不变的公共父级都将起作用，'body'并且document通常用作默认值，因为它们是非常顶级的。

当任何子元素引发单击事件时，该事件将继续向上所有父元素。所以它最终会到达一个共同的父级，例如'body'. 该.on()函数还有第二个选择器作为它的第一个参数。该选择器在调用函数之前过滤点击事件的原始元素。

使用这种方法的好处包括：

  • 只有一个事件处理函数附加到一个公共父级，而不是许多附加到许多元素，这可以提高大型或复杂页面的性能。
  • 在页面生命周期的后期添加到公共父元素的子元素仍会得到处理，因为无论何时添加它们，它们仍会将其单击事件发送给父元素。（这是您的情况的直接好处。）

至于淡入内容，如果我理解您想要达到的效果，您可以尝试淡出已经存在的内容，删除它，添加新内容，然后淡入。也许是这样的：

$.get('various/reloadPage.php', function(data) {
    $('#content').fadeOut(400, function() {
        $("#content").html(data);
        $('#content').fadeIn();
    });
});

使用相对较新的“承诺”模型可能会有更新的结构来完成同样的事情，但本质上它所做的是将内容淡出，然后包含一个回调函数，以便在它完成淡出时调用。该回调函数会替换 HTML，然后将其淡入。根据 HTML 的结构，您可能需要淡出/淡入父元素而不是我的目标元素，但希望您能在此处了解并可以调整它，直到它看起来正确。

于 2013-07-27T00:27:18.393 回答
0

问题 1：click 事件处理程序绑定到初始切换类元素，但未绑定动态创建的事件。

尝试使用live()或on()绑定动态创建的元素。请参阅：动态创建的元素上的事件绑定？

问题2：#content使用时被替换html()

尝试使用append()将数据添加到现有元素中。使用html()将替换元素的内容。

我已经链接了 ahide()和 afadeIn()来为附加​​设置动画。

$('#content').append(data).hide().fadeIn(1000);

于 2013-07-27T00:31:32.703 回答