Question

如您所见，如果您更改文本值，那么我希望显示红色警告。当它们悬停在链接或文本“警告”上时，我希望显示警告消息。

为了实现这一点，我将所有内容都包含在一个带有自定义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

您需要使用.on

绑定动态插入元素上的事件

$('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/

当链接存在时，jQuery mouseenter不能在整个范围内工作

1 个答案: