访问使用 jquery .load() 创建的 DOM 元素答案

【问题标题】：Accessing DOM element created using jquery .load()访问使用 jquery .load() 创建的 DOM 元素
【发布时间】：2014-11-01 02:12:28
【问题描述】：

我的目标是使用 PHP 从 mysql 数据库中获取一组数据，以用于 javascript 函数； graph() 在下面的例子中。

我选择通过将我需要的数据加载到一个 DOM 元素来做到这一点。我现在正在尝试访问它。查询有效，我可以在#loadTarget div 中看到我需要的信息。我在访问 innerHTML 时遇到了问题。

根据 Jquery 文档，我可以使用一个完整的函数，该函数将在加载完成后执行： .load（网址[，数据] [，完成]）那么，为什么当我可以在我的元素中看到我需要呈现的数据库数据时，我不能使用 getElementByID 和 innerHTML 访问它？

var dataLocation = document.getElementById("arrayTargetOne"); var data = dataLocation.innerHTML;

以上返回数据为空。如果我对父元素执行相同的 getElementById（不是在我的 PHP .load 文件中创建的那个，而是已经存在的那个），我可以看到我需要的数据。这就像 .load 功能不完整。我错过了一些小事还是应该采取不同的方法？

Javascript/Jquery

$( ".selectUser" ).click(function() {

var userChoice = document.getElementById(this.id);
var user = x.innerHTML;

$("#loadTarget").load("example.php",{"data":user},function() {
var dataLocation = document.getElementById("arrayTargetOne");
var data = dataLocation.innerHTML;
alert(data);
graph();

});

PHP

<?php
$login_errors = array();
require ("config.php");
require (MYSQL);

$arrayOne = array();
$arrayTwo = array();
$exampleQuery = $dbc->prepare("SELECT exampleFieldOne,exampleFieldTwo FROM exampleTable WHERE userID=? AND name=?");

$exampleQuery->bind_param('ss',$_SESSION['user_id'],$_POST['data']);
$exampleQuery->execute();
$exampleQuery->bind_result($a,$b);

while($exampleQuery->fetch()){

array_push($arrayOne,$a);
array_push($arrayTwo,$b);

}

echo '<span id="arrayTargetOne">';
echo json_encode($arrayOne);
echo '</span><span id="arrayTargetTwo">';
echo json_encode($arrayTwo);
echo '</span>';
?>

});

【问题讨论】：

如果你想要来自 ajax 调用的数据，你真的应该只使用 $.get() 将数据获取到 javascript 中，而不是先将其放入 DOM 中。
谢谢。如果我将请求修改为如下所示，PHP 需要是什么样子才能传回数据？假设回显 json 数组不会这样做？$.get("example.php",{"data":user}, function(data){ alert("Data: " + data); });
您应该只从 PHP 返回 JSON 并让 jQuery 将其解析为 javascript 对象作为您的 ajax 结果。然后，您将拥有已经为您解析的所有数据。

标签： php jquery

【解决方案1】：

var list = document.getElementById('loadTarget').children;
for (var i=0, len = list.length; i<len; ++i) {
    var data = list[i].nodeValue; //for text nodes, use innerHTML for elements
    //do stuff with data
}

该列表将是已创建的 DOM 节点的列表。

【讨论】：