Jquery fadeOut(）在Ajax中不起作用

Jquery fadeOut() is not working in Ajax

本文关键字：Ajax 不起作用 fadeOut Jquery      更新时间：2023-09-26

我有一个.php文件，它使一个表充满了数据库中的项。下面是填充表格的while循环：

while($request = $list->fetch(PDO::FETCH_ASSOC)) {
  if(!in_array(array($request['artist'], $request['title']), $arrayList)) {
    echo "<tr id='remove-" . $count . "'>";
    echo "<td class='". $count . "'>" . $count . "</td>";
    echo "<td class='artist'>" . $request['artist'] . "</td>";
    echo "<td class='title'>" . $request['title'] . "</td>";
    echo "<td>" . ShowTime($request['time_created']) . "</td>";
    echo "<td><button type='button' class='btn btn-success played'><span class='ion-play' aria-hidden='true'></span></button></td>";
    echo "<td><button type='button' class='btn btn-danger deletesong'><span class='ion-trash-a' aria-hidden='true'></span></button></td>";
    echo "</tr>";
    $count++;
    $arrayList[$request['id']] = [$request['artist'], $request['title']];
  }
}

当一个人点击其中一个".played"按钮时，会发送一个ajax"POST"请求，将数据库中的参数设置为1。这是由另一个脚本处理的，它运行正常，因为参数是在我单击按钮时设置的。这是处理点击按钮的jQuery文件：

$('button.played').click(function() {
  var number = $(this).closest( "tr" ).children( ".count" ).html();
  var artist = $(this).closest( "tr" ).children( ".artist" ).html();
  var title = $(this).closest( "tr" ).children( ".title" ).html(); 
  var data = "artist=" + artist + "&title=" + title;
  var trid = "remove-" + number;
  var $parent_tr = $('#'+trid);
  $.ajax({
    type: "POST",
    url: "/assets/scripts/php/played_request.php",
    data: data,
    cache: false,
    success: function() {
      $parent_tr.fadeOut( 1000, function() {
        $(this).remove();
      });
    }
  });
});

问题是，即使AJAX被成功处理（成功块被调用），fadeOut函数也没有响应，因为没有什么东西会消失。我找不到问题，这个功能在控制台上可以使用。

jQuery(parent_tr).fadeOut( 1000, function() {
  $(this).remove();
});

有人能向我解释一下我做错了什么吗？

更改您的代码，如：

var $parent_tr = $(this).closest( "tr" );

因为我在您的HTML中没有看到任何具有类count的元素。

有两种可能性：

  1. tr中缺少计数类
  2. 第二次更改.html()到.text()

请尝试将.html()更改为.text()，然后重试：-

    $('button.played').click(function() {
      var number = $(this).closest( "tr" ).children( ".count" ).text();
      var artist = $(this).closest( "tr" ).children( ".artist" ).text();
      var title = $(this).closest( "tr" ).children( ".title" ).text(); 
      var data = "artist=" + artist + "&title=" + title;
      var trid = "remove-" + number;
      var $parent_tr = $('#'+trid);
      $.ajax({
        type: "POST",
        url: "/assets/scripts/php/played_request.php",
        data: data,
        cache: false,
        success: function() {
          $parent_tr.fadeOut( 1000, function() {
            $(this).remove();
        });
      }
    });
相关文章：