javascript - 带有 jQ​​uery 的动态 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 有一个带有类的 div listResults，所有内容都被附加到该类中。目前javascript在加载后运行，所以我在jQuery.hide它.content生成后调用它。

问题是，当我单击其中一个标题 div 时，它不会下拉内容。有任何想法吗？

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 可以使用。

更新了 Demo-1和更新了 Demo-2。

Answer 2

您在运行时创建 div，因此请使用实时绑定，请在此处阅读有关实时的信息

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

Answer 3

我不会使用 live 方法，它在 1.9 中被折旧和删除。您最好的选择是在创建 div 时使用“on”方法。http://api.jquery.com/on/