使用jQuery创建动态div内容

Question

我想在我的网站上放置一个div，其内容根据所点击的链接而不刷新进行更改。要放置的内容来自于一个MySQL数据库，并以JSON格式呈现。

我的问题是：当点击链接时，无法显示JSON数据。

这是我正在使用的脚本：

$(document).ready(function () {
   $.getJSON("jsondata.php",rightSideData);
   function rightSideData(data) {
      for(var i=0; i<data.length;i++) {
         $("#changetext"+data[i].id).click(function() {
            $("#rightside").html("<h1>" + data[i].title + "</h1><p />" + data[i].content);
         });
      }
   }
});

这是需要更改的div元素：

<div class='rightside' id='rightside'>Test</div>

链接是这样构建的：

echo "<a id='changetext" . $row['id'] . "'> ";
echo "<div class='tile'>";
echo "<h2>Tile</h2></div></a>";

我已经测试了不同的元素，它们都能正常工作（使用硬编码数据更改div内容，显示JSON数据），但是我很难弄清楚为什么组合起来就不能工作。

- Friso van Dijk

Answer 1

对象没有长度，使用$.each进行迭代，除非它实际上是包含对象的数组：

$(document).ready(function () {
   $.getJSON("jsondata.php",rightSideData);

   function rightSideData(data) {
      $.each(data, function(i, d) {
         $("#changetext" + d.id).on('click', function() {
             var h1 = $('<h1 />', {text : d.title}),
                 p  = $('<p />', {text : d.content});
             $("#rightside").html(h1.add(p));
         });
      });
   }
});

- adeneo

---

虽然您更新的代码更清晰，但它只显示标题。由于我对此还很陌生，所以似乎找不到错误... - Friso van Dijk

@Freezzo - 这是我的错，大多数jQuery方法都可以添加多个元素，比如.append(elem1, elem2, elem3)，但是html()似乎只接受一个元素，所以我们必须将这两个元素相加以创建一个元素，已编辑答案。 - adeneo

Answer 2

问题在于循环结束时变量 i 将会等于 data.length，而这就是点击处理程序将看到的内容。

- Claudio Redi