jQuery 不适用于从 Java servlet 的响应生成的表答案

【问题标题】：jQuery doesn't work on table generated from response of Java servletjQuery 不适用于从 Java servlet 的响应生成的表
【发布时间】：2018-09-09 19:13:00
【问题描述】：

我对 servlet 响应生成的表有一个奇怪的问题。

事情是：

我有一个带有按钮的 HTML 页面，用户按下按钮，Ajax 调用开始向 Java Servlet 调用。 servlet 以一个简单的 HTML 表作为响应，该表显示在按钮下方的 div 内。

我创建了一个简单的jQuery 函数，每次点击元素TD 时都会在Javascript 控制台日志中打印一条消息。但是在点击TD 时它什么也没做。

奇怪的是，在同一个页面上有相同的 HTML 表格（不是由 javascript 生成，而是包含在 HTML 页面中），在这种情况下，jQuery 函数工作正常。

这里是表格的代码：

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

这里是 jQuery 代码：

jQuery(document).ready(function() {
  $("td").click(function() {
    console.log("testlog");
  });
});

谢谢

【问题讨论】：

检查我的答案，它比链接点击 ajax 调用响应更容易。

标签： javascript java jquery html

【解决方案1】：

问题是动态生成的table 没有事件侦听器，因为它加载的时间晚于 DOM，您无法直接在td 上侦听单击，但无论是在整个文档上还是在表格的包装上，这里都是工作示例。

我在 0.5 秒内加载表格以模拟 ajax。

setTimeout(function() {
  $('#wrapper').append(`<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>`)
}, 500)

//works
$('#wrapper').on('click', 'td', function() {
  console.log('this works')
})

//this does not
$('td').on('click', function() {
  console.log('this does not work')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>

【讨论】：

【解决方案2】：

您需要在渲染 ajax 调用之后而不是在文档就绪事件时放置脚本。好吧，我不知道你的代码看起来如何，但做类似的事情

$.ajax({
//options
}).done(function(res){

  $('body').append(res)
  $("td").on('click',function() {
    console.log("testlog");
  });
})

【讨论】：

【解决方案3】：

在这种情况下总是使用.on

jQuery(document).ready(function() {
  $("td").on('click',function() {
    console.log("testlog");
  });
});

【讨论】：