自动刷新 HTML 表上的 Ajax 单击事件 - Ajax Click Event on auto refreshing HTML Table

Ajax Click Event on auto refreshing HTML Table

本文关键字：Ajax 单击事件刷新 HTML | 更新日期: 2023-09-27

我有一个自动刷新的HTML表格，里面有一些按钮。我目前使用以下代码每 5 秒刷新一次表并设置 ajax ClickListener。我的问题是该事件仅在第一次刷新触发之前触发。

<?php require_once ('UserTableHtml.php'); ?> 
<script type='text/javascript'>
  var table = $("#t02");
  // refresh every 5 seconds
  var refresher = setInterval(function() 
  {
    table.load("UserTableHtml.php");
  }, 5000);
                                                      
  table.ready(function()
  {
    $('.btnUser').click(function()
    {
      var clickBtnValue = $(this).val();
      var ajaxurl = 'home.php',
      data =  {'action': clickBtnValue};
      $.post(ajaxurl, data, function (response) 
      {
        // Response goes here.
        alert("action performed successfully");
      });
     });
   });
</script>

输出表的完整代码由"UserTableHtml.php生成

感谢您的回答，圣诞快乐

如果问题出在单击按钮上，则应使用

$('.btnUser').on('click',function(){...});

本能

$('.btnUser').click(function(){...});

对于动态元素，请使用.on()注释附加事件。

看起来它只在 5 秒后加载...添加下面的行，使其在表完成渲染后加载。

<script type='text/javascript'>
  var table = $("#t02");
  // refresh every 5 seconds
  var refresher = setInterval(function() 
  {
    table.load("UserTableHtml.php");
  }, 5000);
  table.ready(function()
  {
    $('.btnUser').click(function()
    {
      var clickBtnValue = $(this).val();
      var ajaxurl = 'home.php',
      data =  {'action': clickBtnValue};
      $.post(ajaxurl, data, function (response) 
      {
        // Response goes here.
        alert("action performed successfully");
      });
     });
     //add this here...
     table.load("UserTableHtml.php");
   });
</script>

伙计们，我刚刚想通了。现在它像例外一样工作。

var table = $("#t02");
table.ready(function()
{
  $(document).on('click', '.btnUser',function()
  {
    var clickBtnValue = $(this).val();
    var ajaxurl = 'home.php',
    data =  {'action': clickBtnValue};
    $.post(ajaxurl, data, function (response) 
    {
      // Response div goes here.
      alert("action performed successfully");
    });
  });
});

<button type="submit" class="btnUser" name="userEdit" value="user_edit_'.$user->getId().'"><img src="images/edit-4.png" />