javascript - 鼠标悬停jquery方法不起作用

Question

<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

Answer 1

有多个问题

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

所以

$(document).ready(function () {

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


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

演示:Fiddle