jQuery切换由Ajax填充的子租约

我有一些json文件，用一些信息填充页面。 在填充的元素上，我需要运行切换操作，但无法在jquery中检索子元素

function() {
  $.getJSON( "/pathto/glossar.json", function( data ) {
    var items = [];
    $.each( data, function( key, val ) {
      items.push( "<dt>" + key + "</dt>\n\r<dd id='" + key + "'>" + val + "</dd>\n\r\n\r" );
    });
    $( "<dl/>", {
      "id": "glossar",
      html: items.join( "" )
    }).appendTo( "#main-container" ).on(
        $("dt").click(function() {
            $(this).children().toggle()
        })
        //$('dd').hide()  
    );
  });
}

生成的DOM元素是

<dl id="glossar">
<dt>KEY</dt>
<dd id="KEY">Bla Bla Value</dd>
..
</dl>

单击dt后，我需要切换dd值。看起来jquery.on在这种情况下不获取DDs！？是否需要一秒钟。在dt-s上？

试试这个， 在getjson函数中编写以下代码

$( "<dl/>", {
  "id": "glossar",
  html: items.join( "" )
}).appendTo( "#main-container" );

---

由于要动态添加元素，因此必须在jQuery中使用事件委派：

将一个或多个事件的事件处理程序函数附加到 选定的元素

参考：

大多数浏览器事件从最深处冒泡或传播， 最里面的元素发生事件的文档中的事件目标 一直到主体和文档元素。在互联网上 Explorer 8和更低版本，一些事件（如更改和提交）不会 本机冒泡，但jQuery修补这些冒泡并创建 一致的跨浏览器行为

如果选择器被省略或为null，则事件处理程序称为 直接的或直接绑定的。每次事件发生时都会调用处理程序 发生在选定图元上，无论它是否直接发生在 元素或从子代内部元素引出的气泡

当提供选择器时，事件处理程序称为 委派。当事件直接发生在上时，不调用处理程序 绑定元素，但仅适用于 匹配选择器。jQuery将事件从事件目标向上冒泡 到处理程序所附加的元素，即最里面的 最外层的元素，并为沿着该元素的任何元素运行处理程序 与选择器匹配的路径

事件处理程序仅绑定到当前选定的元素；他们 在代码调用.on时，页上必须存在。 要确保元素存在并且可以选择，请执行事件 在文档就绪处理程序中为 页面上的HTML标记。如果新的HTML被注入到页面中， 选择元素并在创建新HTML后附加事件处理程序 放入页面中。或者，使用委派事件附加事件 处理程序，如下所述

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序。这 元素可以是视图中的容器元素 例如，模型视图控制器设计，或记录事件 处理程序希望监视文档中的所有冒泡事件。这个 文档元素在之前的文档头中可用 加载任何其他HTML，因此可以安全地在那里附加事件，而无需 正在等待文档准备就绪

您可以在document.ready中定义一个处理程序，因此在ajax调用之外，如下所示：

$("body").on("click", "#main-container dt", function () {
    $(this).siblings("dd").toggle();
});

对于由dd元素提供的HTML，它是dt的兄弟元素，而不是子元素，因此我相应地更改了选择器

---

演示：

单击功能被调用，但没有找到子项，没有切换。。。等同于above@armand将其设置为$dt.live'click'，函数{$this.children'dd'.toggle；}@然后您可以使用.on函数，比如$document.on'click'，dt'，函数{$this.children'dd'.toggle；}；感谢您提供的信息和代码：$this.siblingsdd.toggle；将切换任何dd。只需要子项$this.childrendd.toggle；不起作用…刚刚意识到dt/dd不是父子关系。dt没有孩子。工作正常。请看这里：；是的，不是父母/孩子，而是siblings@Armand当前代码不适合您？你能解释得更清楚些吗？是的，这是可能的，但我认为最好再问一个问题

$("body").on("click", "#main-container dt", function () {
    $(this).siblings("dd").toggle();
});