JQuery - Кажется, что невозможно связать событие с динамическими элементами DOM

Question

Использование JQuery UI Draggable, я клонирую элементы, поскольку они оставляют неупорядоченный список. Поскольку они новы для DOM, я пытаюсь использовать метод JQuery On() для привязки события, которое покажет скрытую ссылку. Якорь с отменой класса имеет display: none; в css.

HTML

<ul class="current-campaign"> 
    <li class="draggable">One <a class="pull-right cancel" href="#"> 
      <i style="color:red">Icon</i> 
     </a> 

    </li> 
</ul> 
<ul class="new-campaign sortable"></ul> 

JQuery

$(".sortable").sortable(); 
$(".draggable").draggable({ 
    connectToSortable: ".sortable", 
    helper: "clone", 
}); 

$(".current-campaign").on("mouseout", ".cancel", function() { 
    $(".cancel").show(); 
}); 

Действительно возникли проблемы выяснить, почему ссылка не появляется, когда он выходит из маркированного списка. Вот сценарий JS, чтобы увидеть его в действии.

http://jsfiddle.net/og937wy7/

FINAL ИЗМЕНИТЬ С ОТВЕТА Вооружившись знаниями о том, как использовать функцию(), я исправил мой код так, что он работает, как я предполагал.

$(document).on("mouseover", ".new-campaign", function (e) { 
    console.error($(this)); 
    $(".new-campaign").find('.cancel').show(); 
}); 

http://jsfiddle.net/og937wy7/4/

Answer 1

Вы прикреплении событие .cancel, что не совсем в представлении:

$(".current-campaign").on("mouseout", ".cancel", function() { 
    $(".cancel").show(); 
}); 

Как вы mouseout, когда .cancel не имеют площадь? Замените его .draggable:

$(".current-campaign").on("mouseout", ".draggable", function() { 
    $(".cancel").show(); 
}); 

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

$(".current-campaign, .new-campaign").on("mouseout", ".draggable", function() { 
    $(".cancel").hide(); 
}).on("mouseover", ".draggable", function() { 
    $(".cancel").show(); 
}); 

Я хотел бы также сказать, что это не правильный путь, потому что это влияет на все .cancel. Таким образом, вы, возможно, придется использовать $(this).find():

$(".current-campaign, .new-campaign").on("mouseout", ".draggable", function() { 
    $(this).find(".cancel").hide(); 
}).on("mouseover", ".draggable", function() { 
    $(this).find(".cancel").show(); 
}); 

Fiddle: http://jsfiddle.net/dpojx7so/

Но все может быть сделано с помощью CSS сам !!!

Вам просто нужно добавить этот CSS, вместо всего JS:

.sortable:hover .cancel { 
    display: inline; 
} 

скрипку: http://jsfiddle.net/mx58stx3/