带有jQuery的动态div,显示点击内容

时间:2013-02-24 22:41:10

标签: javascript jquery

我一直在尝试在这个网站http://www.designgala.com/demos/collapse-expand-jquery.html

上制作演示

我遇到了问题。 这是代码:

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有一个名为listResults的div类,其中所有内容都被附加到。目前jaavscript是在加载后运行的,所以我在.content上调用了jqeury.hide。它生成了它。

问题是,当我点击其中一个标题div时,它不会下拉内容。有什么想法吗?

3 个答案:

答案 0 :(得分:2)

试试这个

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

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

DEMO.

或者您也可以尝试这个

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

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

DEMO.

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

Updated Demo-1Updated Demo-2.

答案 1 :(得分:1)

您正在运行时创建div,因此请使用实时绑定,请阅读此处的实时

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

答案 2 :(得分:1)

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