Question

我对jQuery有点新手，我看到了如何将可点击的动态TR添加到现有表的示例，但是如何动态添加一个具有可点击TR的全新表？

我的HTML代码：

<input type="text" id="containing"><div id="results"></div>

我的jQuery代码，它对输入进行POST并将新的HTML表返回到Results div：

$("#containing").on("keyup", function() 
{
 $.post("http://URL.com/search.php", { searcher: $(this).val() },function(data, textStatus) 
 { 
  $("#results").html(data);
 });
});

Search.php返回以下格式：

<table id="resultantTable"><tr><a href="..."></a><td></td></tr></table>

...还有额外的jQuery代码，它应该让我点击新表行，这不起作用：

$(document).ready(function() 
{
 $("#resultantTable").on('click','tr',function()
 {
  var href = $(this).find("a").attr("href");
  if(href) 
  {
   window.location = href;
  }
 });
});

这个jQuery代码适用于加载文档的表，但是我无法在search.php返回的动态创建的表中使TRs可单击。

有什么想法吗？

Answer 1

发生此行为是因为您在所有现有表上设置了事件侦听器，但是当您动态创建表时，它没有此侦听器。解决这个问题的一种方法是在创建时在新创建的表上设置事件监听器，但我这样做的方法是将事件监听器放在我知道存在于文档加载的父元素上（如正文）

$('body').on({
    click: function(){
    ...
    }
}, '#resultantTable tr' )

Answer 2

这是因为事件是在ajax内容存在之前注册的。（第一次加载DOM时，resulTable不存在）

尝试在$（“＃results”）之后添加你的函数.html（data）;

在你的ajax调用中，你听取成功/错误事件是一个很好的做法

在成功事件中添加渲染并单击作业。

请参阅有关该

的jquery文档

Answer 3

您需要在父级上添加侦听器。例如：

$(document).on('click', '#resultantTable tr', function(e){
  //ToDo...
});

jQuery添加带可点击行的动态表

3 个答案: