Проблема с анимацией jQuery, когда я заменяю внутренний div - PullRequest
Новая
       2

Проблема с анимацией jQuery, когда я заменяю внутренний div

0 голосов
/ 09 июля 2010

Раздел страницы: 

<div id="cartslide">
    <div id="swrapper">
        content goes here
    </div>
</div>

jquery animate section: 

$(document).ready(function () {

$('#animate-both').click(function () {
   $('#cartslide').animate({
       opacity: 'toggle',
       height: 'toggle'
    });
  });
});

Пока это работает отлично.Проблема возникает, когда я заменяю содержимое раздела «swrapper» следующим образом: 

           $.ajax({
                type: "POST",
                url: "cart/slider",
                data: dataString,
                cache: false,
                success: function(html){
                     $("#swrapper").replaceWith(html);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                     alert(errorThrown + ' '+ textStatus);
                }
           });

Содержимое заменяется (я вижу это с помощью firebug), но оно больше не будет переключать содержимое «cartslide»", окружающий div.

Я удивлен, что это.Я думаю, что это будет работать, но это не так, я полагаю, потому что содержимое внутреннего div (swrapper) было заменено.

Это причина?

Есть ли обходной путь?

Спасибо!

1 Ответ

2 голосов
/ 09 июля 2010

Если #animate-both в #swrapper, то да, есть причина.

События присоединяются к подразделениям , когда вы присоединяете их , что означает присоединение один раз. Если вы замените его, то элемент, содержащий событие, больше не будет там.

Обходной путь использует живую функцию jQuery. Это означает, что даже если она создана (включая замену), она будет работать: 

$(document).ready(function () {

$('#animate-both').live( 'click', function () {
   $('#cartslide').animate({
       opacity: 'toggle',
       height: 'toggle'
    });
  });
});
...