JQuery доступ к клонированному элементу - PullRequest
Новая
       5

JQuery доступ к клонированному элементу

0 голосов
/ 17 февраля 2011

У меня есть неупорядоченный список вроде: 

<ul>
   <li data-id="1" data-value="text"> My text </li>
   <li data-id="2" data-value="movie"> My movie </li>
   <li data-id="3" data-value="text"> Another text </li>
   <li data-id="4" data-value="picture"> Picture </li>
</ul>

И я использую плагин jQuery Quicksand для сортировки этого списка:

http://razorjack.net/quicksand/

Проблема в том, что я использую jQuery для этих ссылок (приведенный ниже код является просто переписанным примером, может не работать): 

jQuery("li").hover(function() {
    jQuery(this).animate({opacity: 0.2}, 500);
}, function() {
    jQuery(this).animate({opacity: 1}, 500);
});

И до сих пор все отлично работает.

Но Quicksand работает с двумя списками, поэтому я создаю второй динамически: 

 jQuery('document').ready(function(){    
        //create a clone of the full list of elements and extract 'li' elements
        //in order to use it as the 'second' list for quicksand
        var cache_list = jQuery('ul').clone();

        //Add on click event handler to the 'ALL' button
        jQuery('ul.portfolio-terms li a[data-value=All]').click(function(e) {
                //Call quicksand on the original works_list list(the one visible to the user)
                //pass to it all the 'li' elements from the cached clone 
                //since we want to display them all
                jQuery('.portfolio-list').quicksand( cache_list.find('li'), {
                  duration: 500,
                });
            e.preventDefault();
(...)

А после сортировки (щелкнув, например, по ссылке «Все») мои наложения / анимации jQuery не работают. Я полагаю, что это потому, что мой код jQuery не привязан к динамически «производимому» клонированному списку. Как это исправить?

1 Ответ

2 голосов
/ 17 февраля 2011

Вы можете прикрепить анимацию с помощью live () : 

jQuery("li").live({
        mouseover:
           function() {
             jQuery(this).animate({opacity: 0.2}, 500);  
           },
        mouseout:
           function() {
             jQuery(this).animate({opacity: 1}, 500);
           }
       }
    );

Таким образом, каждый элемент li будущего также получит те же самые события.

...