javascript - 工作 JQuery 脚本在 ajax post 响应后不起作用

Question

我真的很感激任何帮助!

我有一个有效的 jquery 脚本。单击 div 时，它会将 css 类更新为事件状态并执行有效的 ajax 响应。

我还有一个可以使用的过滤功能。当勾选复选框时，它会从 mysql 调用具有所有相同类属性的新 div 列表。但是，当单击这些新 div 中的任何一个时，ajax 响应将不起作用。如果有人可以提供帮助，我将非常感激!

HTML:

        <div id="result" class="results">
        <div class="w-embed"><img src="images/loader.gif" id="loader" width="" "200px"="" style="display:none;">
          <?php
    $sql="SELECT * FROM `posts`";
    $result=$con->query($sql);
    while($row=$result->fetch_assoc()){
      ?>
            <div class="c-card" data-id="<?=$row['id'];?>">
              <h1 class="s-h2">
                <?=$row['title'];?>
              </h1>
              <!-- <div class="s-para m-light m-small"><?=$row['description'];?></div> -->
              <div class="c-stats">
                <div class="s-stat">Pay:
                  <?=$row['pay'];?>
                </div>
                <div class="s-stat">Deadline:
                  <?=$row['deadline'];?>
                </div>
                <div class="s-stat">Location:
                  <?=$row['location'];?>
                </div>
                <div class="s-stat">Cat:
                  <?=$row['category'];?>
                </div>
              </div>
              <p class="s-para">
                <?=$row['description'];?>
              </p>
              <a href="<?=$row['lnk'];?>" class="l-para">Find Out More</a>
            </div>
            <?php }?>
        </div>
      </div>

Javascript:

 <script>
$('.c-card').on('click', function(event){
 event.preventDefault();
    $('.c-card').removeClass('active'); //Removes class to all
   $(this).toggleClass('active'); //Applies class

    var action = 'data';
    var dataId = $(this).data("id");

    $.ajax({
        type:"POST",
        url:"ajax/selected.php",
        data:{action:action,id:dataId},
        success: function(response){
          $("#jobber").html(response);
          $("#changeme").text("altered");
          }
        });
      });
</script>

这是过滤器输出的响应:

'<div class="c-card" data-id="'.$row['id'].'">
                  <h1 class="s-h2">'.$row['title'].'</h1>
                  <div class="c-stats">
                  <div class="s-stat">Pay:'.$row['pay'].'</div>
                    <div class="s-stat">Deadline:'.$row['deadline'].'</div>
                    <div class="s-stat">Location: '.$row['location'].';</div>
                    <div class="s-stat">Cat: '.$row['category'].'</div>
                  </div>
                  <p class="s-para">'.$row['description'].'</p>
                  <a href="'.$row['lnk'].'" class="l-para">Find Out More</a>
                </div>';

所以我的问题是如何使新的div(从过滤器调用)继续被触发并更改类+执行ajax查询。

提前非常感谢!

Answer 1

我一直认为你的实际问题是 ajax 响应变得空。

 <div class="c-card" data-id="<?=$row['id'];?>">

您正在 HTML 部分中使用 data-id 属性。但该脚本处理用于获取 id 的 id 属性。因此，对于 ajax 调用，id 为 null，请使用以下代码或根据需要将 HTML 部分中的 data-id 属性更改为 id。

var action = 'data';
var dataId = $(this).data("data-id");

“id”和“data-id”是 HTML 的不同属性。请在 HTML 和脚本中使用相同的属性