Jquery 滑动切换不适用于动态生成的div_Jquery_Jquery Selectors

Jquery 滑动切换不适用于动态生成的div

jquery

Jquery 滑动切换不适用于动态生成的div,jquery,jquery-selectors,Jquery,Jquery Selectors,我想添加很多带有滑动切换的隐藏div的。我不想写这么长的代码，这就是为什么我要尝试这个： <html> <head> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" > </script> <script type="text/javascript"> $(docum

我想添加很多带有滑动切换的隐藏div的。我不想写这么长的代码，这就是为什么我要尝试这个：

<html>
<head>

<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript" >


</script>
<script type="text/javascript"> 
$(document).ready(function() {
    //this function does not work when I append the p and div
    $(".flip").click(function() {
        $(this).next().slideToggle("slow");

    });
    var p = $('<p></p>').addClass('flip').text('click here');
    var div = $('<div></div>').addClass('panel').text('hellow world');
    p.append(div);
    $(p).bind('click', function() {

     // alert($(this).text()); //this alert works when i put it as a p.bind
       $(this).next().slideToggle("slow"); //this does not work!! but the previous alert does work....
     });
    $("div#elements").append(p);


});
</script>


<style type="text/css"> 
div.panel,p.flip
{
    margin:0px;
    padding:5px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
}
div.panel
{
    height:120px;
    display:none;
}
</style>
</head>

<body >

<div id="elements" >


 </div>

</body>
</html>


$（文档）.ready（函数（）{
//当我附加p和div时，此函数不起作用
$（“.flip”）。单击（函数（）{
$（this.next（）.slideToggle（“slow”）；
});
var p=$（''）。addClass（'flip'）。text（'click here'）；
var div=$（''）.addClass（'panel'）.text（'hellow world'）；
p、 追加（div）；
$（p）.bind（'click'，function（）{
//警报（$（this.text（））；//当我将其作为p.bind时，此警报有效
$（this）.next（）.slideToggle（“slow”）；//这不起作用！！但上一个警报起作用了。。。。
});
$（“div#elements”）。追加（p）；
});
分区面板，p翻转
{
边际：0px；
填充物：5px；
文本对齐：居中；
背景：#e5eecc；
边框：实心1px#c3c3；
}
分区小组
{
高度：120px；
显示：无；
}

有趣的是，$（flip）函数不能与生成的p和div一起工作……然后我将该函数添加为（p）.bind，并尝试了一个警报，但当我想要滑动切换时，它不能工作，有人知道为什么吗

生成的p和div

这是因为p和div元素是动态添加的，并且在加载页面时还不是DOM的一部分。你有没有试过用这个来代替

谢谢它可以与其他函数一起使用，如$（“.flip”）.live（“click”，function（）{//$（this）.next（）.slideToggle（“slow”）；//alert（“hello”）；$（this.css（“background color”，“red”）；}）；但使用切换仍然不起作用…不清楚您使用slideToggle（）针对哪个元素。如果您的目标是p元素中的div元素，那么应该使用$（this.find（“div.panel”）.slideToggle（“slow”）而不是$（this.next（）.slideToggle（“slow”）。.next（）API获取的是紧跟其后的兄弟姐妹，而不是直接的子代。哇！万分感谢！.find工作，谢谢你对.next的解释我以为我是在用next获得div！

Interesting thing is that the$(flip) function DOES not work with

$(".flip").live("click", function() {
    $(this).next().slideToggle("slow");

});