的jQuery的mouseenter不是整個跨度工作時，一個鏈接存在

Question

MY小提琴：http://jsfiddle.net/8DgUk/

正如你所看到的，如果你改變了文本值，那麼我想一個紅色的警告出現。當他們將鼠標懸停在鏈接或文本「警告」上時，我想要顯示警告消息。

爲了達到這個目的，我用自定義ID將所有內容都包裝在一個div中。您可能會認爲將鼠標懸停在該div的文本上應該觸發，但只會在鏈接錨文本懸停時觸發。

我怎樣才能讓整個div＃add_test_warning成爲一個mouseenter目標？

我的jQuery代碼

$('input').change(function() { 
    $("#addtest").wrap("<div id='add_test_warning'></div>"); 
    $('#addtest').after(' <span style="color:red;font-weight:bold">Warning</span>'); 
    $('#add_test_warning').after('<span id="warningmessage" style="width:100%;display:none">Current split test settings have changed. Please save your settings before adding a new test.</span>'); 
}); 

$('#add_test_warning,#addtest').mouseenter(function() { 
    $('#warningmessage').fadeIn(); 
}); 

$('#add_test_warning,#addtest').mouseleave(function() { 
    $('#warningmessage').fadeOut(); 
}); 

Answer 1

您需要綁定的動態插入元素的活動。對使用

$('input').change(function() { 
    $("#addtest").wrap("<div id='add_test_warning'></div>"); 
    $('#addtest').after(' <span style="color:red;font-weight:bold">Warning</span>'); 
    $('#add_test_warning').after('<span id="warningmessage" style="width:100%;display:none">Current split test settings have changed. Please save your settings before adding a new test.</span>'); 
}); 

// This line has to be changed 
$(document).on('mouseenter', '#addtest, span', function() { 
    $('#warningmessage').fadeIn(); 
}); 

$('#add_test_warning,#addtest').mouseleave(function() { 
    $('#warningmessage').fadeOut(); 
}); 

http://jsfiddle.net/k5bs5/