jQuery подключен сортируемый - нажмите, чтобы переместить не работает правильно

Question

У меня есть два связанных сортируемых списка с использованием jQuery UI, и я сделал это, когда вы нажимаете на элемент в одном списке, он будет добавлять его в нижнюю часть другого списка и наоборот -versa. Проблема, с которой я сталкиваюсь, заключается в том, что она работает в одном направлении, но не в другом. Когда я нажимаю на элемент в первом списке, он правильно переносит его в другой список. Когда я пытаюсь пойти другим путем, он добавляет элемент к себе. Эта скрипка демонстрирует проблему, которую я испытываю: http://jsfiddle.net/qcF9G/. Вот код, а также:

HTML

<div class="container"> 
    EXCLUDE 
    <ul id="exclude" class="connectedSortable"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div> 

<div class="container"> 
    INCLUDE 
    <ul id="include" class="connectedSortable"></ul> 
</div> 

Javascript (JQuery)

$("#exclude, #include").sortable({ 
    connectWith: ".connectedSortable", 
    distance: 10 
}).disableSelection(); 

$("#exclude li").click(function() { 
    $(this).detach().appendTo("#include"); 
}); 

$("#include li").click(function() { 
    $(this).detach().appendTo("#exclude"); 
}); 

Answer 1

Попробуйте это:

$("li").click(function() { 
    if ($(this).closest("ul").attr("id") === "exclude"){ 
     $(this).appendTo("#include"); 
    } 
    else { 
     $(this).appendTo("#exclude"); 
    } 
}); 

Я тестировал на JS скрипкой и это работает.

Вы отправили JS, добавляя слушателей щелчков ТОЛЬКО, КОГДА ВЫ ОБНОВЛЕНА. Поскольку в списке включенных неупорядоченных элементов не было элементов, ни один из элементов списка внутри include ul не прослушивал клики.

Например, попробуйте этот HTML с тем же JS вы были раньше:

<div class="container"> 
    EXCLUDE 
    <ul id="exclude" class="connectedSortable"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div> 

<div class="container"> 
    INCLUDE 
    <ul id="include" class="connectedSortable"> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div> 

Пункт 4 и 5 будет двигаться, чтобы исключить и только остаться там. 1, 2 и 3 будут двигаться только для включения и пребывания там