Question

我想添加很多

，其中包含slideToggle的隐藏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>

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

Answer 1

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

生成的p和div ......

这是因为你的p和div元素是动态添加的，并且在加载页面时还不是DOM的一部分。您是否尝试过使用jQuery live API？

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

});

slideToggle无法处理动态生成的div

1 个答案: