slideToggle не работает на динамически генерируемых div - PullRequest
0 голосов
/ 26 апреля 2011

Я хочу добавить много

со скрытыми элементами div, которые slideToggle. Я не хочу писать такой длинный код, поэтому я пытаюсь это:

<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>

Интересно то, что функция $ (flip) НЕ работает с сгенерированными p и div ... Затем я добавил функцию как (p) .bind и попробовал ее с предупреждением, и она работает, но когда я хочу сдвинуть переключатель, он не работает, кто-нибудь знает почему?

1 Ответ

1 голос
/ 26 апреля 2011
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");

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...