javascript - 每次单击按钮时从 PHP 页面发送的变量都会递增的问题

Question

问题摘要

我有一个 Web 应用程序，它显示从 API 返回的数据摘要(日期、主题、描述等)。用户登录后，PHP 脚本提取数据并将每个项目输出为表行。每行上都有一个链接，允许用户单击该链接将再次调用 API 并提取该条目的详细信息。它使用生成行时放入链接 ID 属性中的项目 ID 号。

出于测试目的，我有一个 JQuery 代码块，当作为 P 元素单击时，它仅呈现每个链接的 ID 号。这样，我就知道 JQuery 函数肯定会将 ID 传递给 PHP 脚本，并且该脚本肯定会将某些内容返回到页面。

这是 PHP 返回数据:

    echo "<tr>
            <td>$dateChange</td>
            <td>$itemSubject</td>
            <td id='myDiv'>$itemSummary<br />
               <a class='test'  href='#' id=$itemID onclick='testing();'> 
               View Details
               </a>
            </td>
            <td>$itemState</td>
          </tr>";

下面是用户单击相应链接时调用的 JQuery 函数:

    function testing() {
        $.post("itemDetails.php", { id: $(this).attr('id') }, function(response) {
         var details = document.createElement("P");
         details.innerText = response;
         document.getElementById('myDiv').appendChild(ticket);
         });
};

我认为会发生什么:

每次单击链接时，该函数都会将该链接的 ID 属性发布到 PHP 脚本。 PHP 脚本将回显该响应，该函数将获取响应并将其呈现为附加到 td 元素的新元素。

实际发生的情况:

第一次单击链接时，该链接的 ID 在页面上呈现两次，下一个链接呈现三次，接下来的四次，依此类推。每次单击链接时，都会输出该链接的 ID++

我不明白为什么它每次都会增加输出而不只是打印一次。

我希望我已经把事情解释清楚了。如果没有，请告诉我。或者，如果我以错误的方式处理这整件事，请告诉我。

亲切的问候

编辑

终于知道自己做错了什么了。删除了 onclick 函数调用并使用了 .ready。更新后的 JavaScript/JQuery 为:

    $(document).ready(function() {
      $("a").click(function(event) {
        $.post("includes/modal.php", { id: event.target.id }, function(response) {
          var ticket = document.createElement("P");
          ticket.innerText = response;
          document.getElementById('myDiv').appendChild(ticket);
        });
      });
   });

感谢您的帮助!非常感谢。

Answer 1

这里的问题是，在您的 testing() 函数中，您正在监听 click 事件，然后在 PHP 响应 HTML 代码中附加此函数到click事件:

<a class='test'  href='#' id=$itemID onclick='testing();'> 

当点击时，将监听另一个 click 事件，该事件将执行另一个请求，该请求将渲染 HTML，并将 testing() 附加到 click 事件以及点击时间...等等。

解决方案

不要在 testing() 函数中添加 click 事件监听器，这样可以避免循环。

利用jQuery.on()方法，它允许您将事件监听器绑定(bind)到事件绑定(bind)时 DOM 中不存在的元素。尝试这样做:

在你的 JS 文件中:

$('#myDiv').on('click', 'a.test', function(e){

    testing($(this).attr('id));
});

并将 testing() 更改为与此类似:

function testing(id) {
    $.post("itemDetails.php", { id: id }, function(response) {
        var details = document.createElement("P");
        details.innerText = response;
        document.getElementById('myDiv').appendChild(ticket);
    });
};

最后但并非最不重要的一点是，从 PHP 响应中删除 onclick:

echo "<tr>
        <td>$dateChange</td>
        <td>$itemSubject</td>
        <td id='myDiv'>$itemSummary<br />
           <a class='test'  href='#' id=$itemID> 
           View Details
           </a>
        </td>
        <td>$itemState</td>
      </tr>";

希望它有所帮助，请随意根据您的需要修改此示例。