JQuery 事件只执行一次

Posted 2023-05-08

【中文标题】JQuery 事件只执行一次

【英文标题】：JQuery Event executed only once

【发布时间】：2022-01-07 02:35:06

【问题描述】：

我正在尝试为一堆按钮触发 JQuery Ajax 事件。

这是 index.php 文件中的代码：

<?php 
foreach($data as $d) 
  $myid = $d['id']; 
  $mystatus = $d['status']; 
  ?>

  <div class="input-group-prepend">
    <button id="submitbtn" type="button" class="myupdatebtn btn btn-success" data-id="<?php echo $myid; ?>" disabled>Finish Task</button></div>

    <li class="nav-item">
      <a class="nav-link clickable blueMenuItem" id="nav-location" data-id="<?php echo $d['id']; ?>">
        <i class="nav-icon fas <?php echo $d['icon']; ?>"></i>
        <p>
          <?php echo $d["title"];
            if ($d['type'] == "task")  ?>
              <span id="updatemsg-<? echo $d['id'];?>" class="right badge <?php if($mystatus == "TERMINATED")echo "badge-success"; else echo "badge-danger";?>"><?php setTerminated($conn, $myid)?></span>
          <?php  ?>
        </p>
      </a>
  </li> 
<?php  ?>

菜单项（标题、状态和图标）是从 mysql 数据库中提取的。

这是带有 AJAX 调用的 javascript (JQUERY) 文件：

$('.myupdatebtn').on('click', function()  
    var id = $(this).data('id'); 

    $.ajax( 
      url: 'includes/updatestatus.php', 
      type: 'POST', 
      data: id:id, 
      dataType: 'html', 
      success: function(data)
       
        if (data) 
         
          $('#submitComment').attr("disabled", true); 
          $('#customComment').val("");
          $('#updatemsg-'+id).html("TERMINATED").removeClass('badge-danger').addClass('badge badge-success'); 
          console.log(id);
         
        else 
         
          $('#customContent').load("custom/static/error.html"); 
          
       , 
       error: function(jqXHR, textStatus, errorThrown)
        
         $('#customContent').html("ERROR MSG:" + errorThrown); 
        
    ); 
);

这是 updatestatus.php 文件的代码：

 <?php

    include("db.php");
    $id = $_POST['id'];
    $query = "UPDATE mytable SET status='TERMINATED' WHERE id='$id'";
    mysqli_query($conn, $query);
      
    ?>

从代码中可以看出，当单击按钮时，它将被禁用并且输入将为空。问题是这段代码只运行一次，之后按钮不会更新 DATABASE 并且 DOM 也不会更新（只有在刷新并再次按下按钮后）。

有没有办法在每次迭代后终止 JQuery 事件（为每个菜单项按下按钮）并使其再次可用以执行？

【问题讨论】：

参考***.com/questions/203198/…

警告：您的代码容易受到 SQL 注入攻击。您应该使用参数化查询和准备好的语句来帮助防止攻击者通过使用恶意输入值来破坏您的数据库。 bobby-tables.com 给出了风险解释，以及一些如何使用 PHP / mysqli 安全地编写查询的示例。 切勿将未经处理的数据直接插入您的 SQL 中。按照您现在编写代码的方式，有人可以轻松窃取、错误更改甚至删除您的数据。

phpdelusions.net/mysqli 还包含使用 mysqli 编写安全 SQL 的好例子。另见mysqli documentation 和这个：How can I prevent SQL injection in PHP?。对查询进行参数化还将大大降低由于未转义或错误引用的输入值而导致意外语法错误的风险。

这段代码只会处理第一个提交按钮的点击。 HTML 中的 ID（与其他任何地方一样）必须是唯一（根据定义！），但您的代码将生成多个具有相同 ID 的按钮。 jQuery 只会将点击绑定到第一个，因为其他的被认为是无效的。改用类，这样您就可以将点击事件绑定到具有相同类的多个元素。

@DevsiOdedra 不，这与这个问题无关。

【参考方案1】：

你说你有“一堆按钮”，我在你的代码中只看到 1 个。

但是，如果您有一堆具有相同 class 但不同 id 的按钮，则此代码将起作用。

$('.myupdatebtn').each(function()
$(this).on('click', function()  
    var id = $(this).data('id');
    $.ajax( 
      url: 'includes/updatestatus.php', 
      type: 'POST', 
      data: id:id, 
      dataType: 'html', 
      success: function(data)
       
        if (data) 
         
          $('#submitComment').attr("disabled", true); 
          $('#customComment').val("");
          $('#updatemsg-'+id).html("TERMINATED").removeClass('badge-danger').addClass('badge badge-success'); 
          console.log(id);
         
        else 
         
          $('#customContent').load("custom/static/error.html"); 
          
       , 
       error: function(jqXHR, textStatus, errorThrown)
        
         $('#customContent').html("ERROR MSG:" + errorThrown); 
        
    ); 
);
)    

为按钮提供适当的ids，以便您的updatestatus.php 正常工作。

$('.mybtn').each(function()
  $(this).click(function()
    alert("You clicked the button with id '"+this.id+"' call ajax do whatever");
  )
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Bunch of buttons right?</h2>

<button id="1" class="mybtn">btn1</button><br/>
<button id="2" class="mybtn">btn1</button><br/>
<button id="3" class="mybtn">btn1</button><br/>
<button id="4" class="mybtn">btn1</button><br/>
<button id="5" class="mybtn">btn1</button><br/>

我无法理解您所说的“有没有办法在每次迭代后终止 JQuery 事件（为每个菜单项按下按钮）并使其再次可用以执行？”，但据我所知需要一个活动的事件监听器，它会触发所有的按钮被点击？

还有一件事我注意到了，你正在使用if(data)//code 但是什么数据？，你没有从 php 文件返回任何东西，返回一些东西。

 <?php

    include("db.php");
    $id = $_POST['id'];
    $query = "UPDATE mytable SET status='TERMINATED' WHERE id='$id'";
    if(mysqli_query($conn, $query)) echo "1";
    else echo "2";
  ?>

然后使用if(data === 1) //do task else if(data === 2)//Do else task

如有任何疑问，请发表评论。

【讨论】：

这将在之后禁用错误的按钮（因为您没有更改对“submitButton”的引用。它也可能会清除错误的评论字段。这段代码与 OP 的代码有何不同？我无法发现任何更改，因此如果您做了任何更改，则需要指出它们。目前尚不清楚您认为这是如何解决 OP 当前的问题（如果您已阅读 cmets，您会看到现在相当模糊和未指定，尽管我已经向您和他们指出了禁用问题）。

I see only 1 in your code...是的，但是 PHP foreach 循环意味着代码很可能会在完成的 HTML 页面中生成多个按钮（这就是 jQuery 必须处理的）。我已经在此评论中向 OP 解释了这一点：***.com/questions/70168333/…。发帖前你看评论了吗？

哈哈，对不起@ADyson 我没有看到foreach 我猜我的错，但我认为处理每个点击事件可能会解决这个问题。

哦，我知道你现在做了什么。为什么你认为它会解决它，究竟是什么？给个解释。但是不，这在功能上与 OP 的当前代码没有什么不同。 jQuery 已经使用带有类选择器的on 正确绑定了事件处理程序。 （如果不这样做，全世界数百万人的代码将被严重破坏，并且 jQuery 文档中的许多示例都是错误的）。事实上，如果您再次阅读 cmets，您会看到我已经制作了一个 JSFiddle 来证明这一点。