jQuery - 动态内容点击事件无法正常工作

Question

我遇到了点击事件以处理某些动态内容的问题。

这比这复杂一点，但几乎我有一个select2输入，当用户键入搜索词时，它会执行ajax请求并将返回的数据添加到表中。

我有一些额外的代码，应该在点击此内容的td元素时运行。如果只返回少量的ajax数据，则click事件将正确执行并定位正确的元素，但是，如果有大量数据添加到表中，我必须向下滚动页面然后单击td元素事件不会执行，而是以tbody元素为目标。

我使用的代码类似于：

$( document ).on( 'click', function( e ) {
    var target = $( e.target );

    if( target.is( "#myId table tr td" ) ) {
        console.log("td element has been clicked!");
    }

});

我也尝试了以下内容：

 $( document ).on( 'click', '#myId table tr td', function(e) {
    console.log( "td element has been clicked!" );
 });

但是，结果与第一部分代码相同。

为什么滚动和点击动态创建的元素会以tbody而不是td元素为目标？

console.log结果目标和HTML结构：

Answer 1

始终编写函数以访问动态创建的页面。 如果您在$(document).bla()中编写代码， 即使在动态页面加载之前，您的javascript代码也可能已加载。

  

只需在td上放置onclick事件处理程序<td onclick='callFunction()'>即可调用该函数。

Answer 2

一些事情：

• 确保如果您执行$("#myId table tr td").length，则返回您期望的行数
• 确保将其包裹在document.ready处理程序中。

您还可以尝试更具范围的示例：

$( "#myId" ).on( "click", "td", function() {
  console.log( $( this ).text() );
});