使用jQuery创建动态div，点击后显示内容

Question

我一直在尝试解决这个网站上的演示。 但是我遇到了问题。 以下是代码:

jQuery(document).ready(function() {
  jQuery(".content").hide();
  jQuery(".heading").click(function() {
    jQuery(this).next(".content").slideToggle(500);
  });
});

var el = document.createElement('div');
el.className = "heading";
el.innerHTML = "whatever you want";
$('.listResults').append(el);

var el2 = document.createElement('div');
el2.className = "content";
el2.innerHTML = "whatever you want shown";
$('.listResults').append(el2);
jQuery(".content").hide();

HTML中有一个带有class为listResults的div，所有东西都会被附加到其中。目前JavaScript在加载后运行，因此我在生成后调用jQuery.hide来隐藏.content。

问题是当我点击其中一个header div时，它不会展开内容。有什么想法吗？

- Denver

---

你能否用最小化可重现测试用例和在线演示重新复制你的设置？ - David Thomas

Answer 1

试试这个

$('.listResults').on('click', '.heading',  function(){
    // whatever you want
});

var el = $('<div/>', {
    'class' : 'heading',
    'html' : 'whatever you want'
});
$('.listResults').append(el);

示例演示

或者你也可以尝试这个

var el = $('<div/>', {
    'class' : 'heading',
    'html' : 'whatever you want',
    'click' : function(){
        // whatever you want, you can use $(this)
    }
});

$('.listResults').append(el);

演示

更新：这会为每个div创建单独的事件处理程序，并且会消耗更多的内存，因此不建议使用，但如果你只有几个div可以使用。

已更新的演示-1和已更新的演示-2

- The Alpha

---

第二个示例有点奏效。当单击时，它不会取消隐藏内容。我也不确定如何使用你的策略来做到这一点。目前我所做的是创建另一个带有 content 类的元素。从那里开始，我需要在创建后将其隐藏，但在单击标题时取消隐藏。这可能吗？ - Denver

我有点困惑，请问你能告诉我你对这些 div 的期望工作流程是什么？ - The Alpha

<div id='listResults'> 是容器。其中有一个可点击的 <div class="heading">。一旦单击标题，它将显示由 js/jquery 生成的所有内容 <div class="content">。 - Denver

该网站是动态生成的。 - Denver

将$(function() {包裹在我的createmarker函数周围会破坏代码。有什么想法吗？这是我所做的一切：http://jsfiddle.net/HfT2d/ - Denver

Answer 2

您正在运行时创建div，因此请使用动态绑定，请阅读此处有关动态绑定的内容。

http://api.jquery.com/live/

- kobe

---

.live()自jQuery 1.7版本起已被弃用，如果您阅读了您正在链接的文档，就可以知道。 - Alexander

Answer 3

我不会使用live方法，因为它已经被弃用并在1.9版本中被移除。您最好的选择是在创建div时使用'on'方法。http://api.jquery.com/on/

- amof