编辑

Question

问题摘要

我有一个Web应用程序，该应用程序显示从API返回的数据摘要（日期，主题，描述等）。用户登录后，PHP脚本提取数据并将每个项目输出为表格行。每行上都有一个链接，允许用户单击该链接，这将再次调用API并提取该条目的详细信息。它使用项目ID号，在生成行时，该项目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在页面上呈现两次，下一个链接呈现3次，接下来的4次，依此类推。每次单击链接时，都会输出该链接的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代码中，将此函数附加到{ {1}}事件：

click

在单击时哪个将监听另一个<a class='test' href='#' id=$itemID onclick='testing();'>事件，该事件将执行另一个请求，该请求将渲染带有附加到click事件的testing()的HTML，并在单击时...等等上。

解决方案

请勿在{{1}}函数中添加click事件监听器，这样可以避免循环。

使用jQuery.on()方法，该方法将使您可以将事件侦听器绑定到事件绑定时DOM中不存在的元素。尝试这样做：

在您的JS文件中：

click

，然后将testing()更改为与此类似：

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

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

最后但并非最不重要的一点，从PHP响应中删除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页面发送的变量都会增加的问题

问题摘要

我会发生什么：

实际发生的事情：

编辑

1 个答案: