识别 AJAX 请求后添加到 DOM 的新元素答案

【问题标题】：Recognize new elements added to DOM after AJAX request识别 AJAX 请求后添加到 DOM 的新元素
【发布时间】：2021-04-17 23:25:11
【问题描述】：

我正在尝试显示通过 AJAX 添加到 DOM 的新 div 元素。

所以，我通过 AJAX/PHP 动态添加了一些新按钮

<button type="button" id="viewPP_'.$index.'" onclick="viewPP('.index.')">View</button>

并且还动态添加了一些新的隐藏div

<div id="viewPP_'.$index.'" style="display: none;">

在我的主页中，我有一个 JS 函数（在 $(document).ready 之前）来显示/隐藏 div

function viewPP(i){
    
var obj = "viewPP_"+i;
    
document.getElementById(obj).style.display = "block";
//$(obj).toggle();

}

如果我使用 document.getElementBy... ，什么都不会发生。（没有错误，什么都不做）

如果我使用$(obj)，什么都不会发生（没有错误，什么都不做）

我可以理解页面加载后添加到 DOM 中的新元素无法被 JQuery 识别，但找不到使其工作的方法。

我该怎么做？？

【问题讨论】：

你是如何将元素添加到 DOM 中的？
也许您需要在 DOM 加载后运行您的函数，即在 $(document).ready(handler) 内？ api.jquery.com/ready
Ajax 成功后重新调用viewPP(i)
请只在答案部分回答自己。请在问题中没有答案。写完后接受你的答案。

标签： javascript php jquery ajax dom

【解决方案1】：

我注意到按钮和 div 的 id 相同，所以我修复了它们，现在可以工作了。

这是工作代码，希望它对未来的人有所帮助。

感谢大家的帮助！

function viewPP(i){   
  var obj = "#dataPP_"+i;
  $(obj).toggle();
} 

$(document).ready(function(){
    $.ajax({
       ...
    });
});

PHP 对 AJAX 请求的响应

print '<button type="button" id="viewPP_'.$index.'" onclick="viewPP('.index.')">View</button>';

print '<div id="dataPP_'.$index.'" style="display: none;"></div>';

【讨论】：

【解决方案2】：

一种方法可能是，您可以添加一个 fix dpm 元素，该元素可以充当您的动态 dom 元素的父 dom 元素。通过这种方式可以获取固定dom父节点的子节点。

【讨论】：

【解决方案3】：

在声明 obj 时删除那个 #。当您使用 getElementById 方法时，您只需要指定 id，不带 #，就像您在 CSS 或 querySelector 方法中使用的那样。

function viewPP(i){
    
var obj = "viewPP_"+i;
    
document.getElementById(obj).style.display = "block"

}

如果不是这样，加载这些元素时会发生一些事情......

【讨论】：