jquery toggle - предотвратить последовательное переключение

Question

У меня есть список с классом agg-drop, чьи элементы имеют имя класса sortedli. Эти элементы имеют 2 состояния переключения. Я клонирую эти элементы, используя .clone (true), который добавляет элемент в список с именем класса «all-drop». Элементы в этом списке имеют 3 состояния переключения. Теперь, если бы я должен был переключать элемент в новом клонированном списке, первые два клика ничего не делают, по-видимому, потому, что он последовательно выполняет функции переключения, а переключатели зависят от имен классов. Есть ли все-таки предотвратить это?

$(".sortedli").toggle(function(){ 
    if($(this).parent().hasClass('agg-drop')){ 
      $(this).css("background","orange"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('agg-drop')){ 
      $(this).css("background","yellow"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","red"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","green"); 
    }}, 
     function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","blue"); 
    }} 
); 

Answer 1

Это работает?

$(".sortedli").toggle(function(){ 
    if($(this).parent().hasClass('agg-drop')){ 
      $(this).css("background","orange"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('agg-drop')){ 
      $(this).css("background","yellow"); 
    } 
}).toggle(function(){ 
    function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","red"); 
    }}, 
    function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","green"); 
    }}, 
     function(){ 
    if($(this).parent().hasClass('all-drop')){ 
      $(this).css("background","blue"); 
    } 
}); 

Answer 2

Вы правы в своем предположении, что это происходит через список переключателей последовательно. Вот почему оригинал li меняется дважды, а затем ничего не делает 3 раза. То, что вы хотите сделать, это приложить отдельное событие переключения после клонирования ul

Это то, что я полагаю, что ваш код выглядит в настоящее время: (http://jsfiddle.net/QGxRK/2/)

$(function() { 
    $(".sortedli").toggle(function(){ 
     if($(this).parent().hasClass('agg-drop')){ 
       $(this).css("background","orange"); 
     }}, 
     function(){ 
     if($(this).parent().hasClass('agg-drop')){ 
       $(this).css("background","yellow"); 
     }}, 
     function(){ 
     if($(this).parent().hasClass('all-drop')){ 
        $(this).css("background","red"); 
     }}, 
     function(){ 
      if($(this).parent().hasClass('all-drop')){ 
       $(this).css("background","green"); 
     }}, 
      function(){ 
     if($(this).parent().hasClass('all-drop')){ 
       $(this).css("background","blue"); 
     }} 
    ); 

    var allDrop = $('.agg-drop').clone(true); 
    allDrop.removeClass('agg-drop').addClass('all-drop'); 
    allDrop.insertAfter('.agg-drop'); 
}); 

Это больше, что вы хотите: http://jsfiddle.net/QGxRK/3/

$(function() { 
    $(".sortedli").toggle(function(){ 
     if($(this).parent().hasClass('agg-drop')){ 
       $(this).css("background","orange"); 
     }}, 
     function(){ 
     if($(this).parent().hasClass('agg-drop')){ 
       $(this).css("background","yellow"); 
     }} 
    ); 

    var allDrop = $('.agg-drop').clone(); //Don't need to clone the events 
    allDrop.removeClass('agg-drop').addClass('all-drop'); 
    allDrop.insertAfter('.agg-drop'); 

    allDrop.find('.sortedli').toggle(function(){ 
      if($(this).parent().hasClass('all-drop')){ 
        $(this).css("background","red"); 
      } 
     }, 
     function(){ 
     if($(this).parent().hasClass('all-drop')){ 
        $(this).css("background","green"); 
      } 
     }, 
     function(){ 
      if($(this).parent().hasClass('all-drop')){ 
        $(this).css("background","blue"); 
      } 
     }); 
});