mouseover jquery方法不起作用答案

【问题标题】：mouseover jquery method not workingmouseover jquery方法不起作用
【发布时间】：2014-01-11 12:05:16
【问题描述】：

<div id="ob"><p>1</p></div>
<div id="ob"><p>2</p></div>

在我的项目中，我使用 php 动态创建具有相同 ID 的类似元素。
我的js是

$(document).ready(function () {
    $("#ob").mousover(function () {
        alert("hello");
    });
});

我也试过 .live('mouseover',function(){}) 。但没有结果。有什么错误？为什么这个功能不起作用？
try this in jsfiddle

【问题讨论】：

你也打错了。它应该是“鼠标悬停”而不是“鼠标悬停”
id应该是唯一的好友，使用class代替。

标签： javascript jquery mouseover

【解决方案1】：

有多个问题

不包括 jQuery - 在 fiddler 左侧面板的第一个选择框中选择 jQuery 版本
ID 必须是唯一的 - 请改用类
live 在 1.9 中被移除，使用 .on() 代替
使用mouseenter 和mouseleave 而不是mouseover 和mouseout

所以

$(document).ready(function () {

    $("p").click(function () {
        alert("hello");
    });


    $(".ob1").on('mouseenter', function () {
        alert("mouseover");
    }).on('mouseleave', function () {
        alert("mouseout");
    });
});

演示：Fiddle

【讨论】：

【解决方案2】：

在你的文件中添加JQuery lib文件，Id必须是唯一的，使用on()而不是live()

试试这个

$(document).ready(function () {

    $("p").click(function () {
        alert("hello");
    });


    $("#ob1").on('mouseover', function () { 
      alert("mouseover"); 
    })

    .on('mouseout', function () { 
      alert("mouseout");

    });

});

DEMO

【讨论】：