JQuery - 似乎無法將事件綁定到動態DOM元素

Question

使用JQuery UI可拖拽，我克隆元素，因爲他們離開無序列表。由於這些對DOM來說是新的，我試圖使用JQuery On（）方法來綁定一個將顯示隱藏鏈接的事件。 css中的類取消錨具有display: none;。

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/

最後編輯，我搞掂我的代碼，所以它的工作，我打算。

$(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(); 
}); 

小提琴：http://jsfiddle.net/dpojx7so/

但是，一切都可以使用CSS本身來完成！

你只需要添加，而不是整個JS這個CSS，：

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

小提琴：http://jsfiddle.net/mx58stx3/