Question

我正在尝试使用一些文字附加p标签，并且我在悬停那个p标签内容时尝试显示警告消息但是这里它不起作用是我的代码：code

Answer 1

在这里：http://jsfiddle.net/Skooljester/37TUN/3/我使用click函数代替hover和live。

以下是代码：

$('#addmore').live("click", function(){
   $('<p id="text3">text3</p>').appendTo('#paragraph_div');
});   
$('#text3').live("mouseover", function(){
   alert('its done!');
});

Answer 2

您只需要move your code around a little bit。这是我改变的：

$('#addmore').click(function() {
    $('#paragraph_div').append("<p id='text3'>text3</p>");
    $('#text3').hover(function() {
        alert('its done!');
    });
});

在创建div以将其绑定到之前，您试图绑定hover事件。我将它移到你实际创建click div的text3事件中。您需要记住在创建新的dom元素之后始终绑定事件。

请注意，正如其他一些答案所述，您可以使用live（已弃用），delegate或on（1.7+）。但是，如果合理的话，我倾向于在创建后向元素添加事件时犯错误。

此外，根据您的意图，在hover事件期间调用警报可能不太合理。您可能希望使用hover来显示div或执行其他操作。如果要弹出警报，最好使用mouseover。有关详细信息，请参阅JavaScript/jQuery: event fired twice。

$('#addmore').click(function() { $('#paragraph_div').append("<p id='text3'>text3</p>"); $('#text3').mouseover(function() { alert('its done!'); }); });

Answer 3

你在一个尚未在DOM中的元素上调用hover()。要解决此问题，请使用on()：

  $('#paragraph_div').on('mouseover','#text3',function(e){
        if ($(e.target).is('#text3')){
            alert("It's done!");
        }
    });

JS Fiddle demo

如评论中所述，Alnitak，on()仅适用于jQuery 1.7及更高版本。要在版本1.7之前使用jQuery版本，可以使用delegate()产生相同的效果：

  $('#paragraph_div').delegate('#text3','mouseover',function(e){
        if ($(e.target).is('#text3')){
            alert("It's done!");
        }
    });

JS Fiddle demo使用jQuery 1.4.4（只是为了演示不同的版本）。

Answer 4

第一件事请删除document引号。因为hover隐式调用事件mouseenter和mouseleave，因此更改hover以使事件mouseenter和mouseleave生效。检查小提琴http://jsfiddle.net/37TUN/10/

$(document).ready(function () {
$('#addmore').click(function(){
$('#paragraph_div').append("<p id='text3'>text3</p>");
});
$('#text3').live('mouseenter mouseleave',function(){
alert('its done!');
});
});

我的悬停功能在jquery中它不起作用

4 个答案: