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

Posted 2023-02-21

【中文标题】识别 AJAX 请求后添加到 DOM 的新元素

【英文标题】：Recognize new elements added to DOM after AJAX request

【发布时间】：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)

请只在答案部分回答自己。请在问题中没有答案。写完后接受你的答案。

【参考方案1】：

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

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

感谢大家的帮助！

JS

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"

    

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