Question

我有一个自动刷新的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'

生成

感谢您的回答是圣诞快乐

Answer 1

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

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

Insted of

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

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

Answer 2

看起来它只在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>

Answer 3

伙计们，我只是想通了。现在它可以作为例外。

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" />

在自动刷新HTML表上的Ajax Click事件

3 个答案: