CODEWITHSUNDEEP
javascriptjquerymouseover
Vignesh Mahalingam
Vignesh Mahalingam

Reputation: 27

mouseover jquery method not working

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

In my project I create similar elements with same id, dynamically using php.
My js is

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

I have tried .live('mouseover',function(){}) also. But no result. What's the mistake? Why the function is not working?
try this in jsfiddle

Upvotes: 1

Views: 71

Answers (2)

Sridhar R
Sridhar R

Reputation: 20418

Add JQuery lib file in your file,Id must be unique,use on() instead of live()

Try this

$(document).ready(function () {

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


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

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

    });

});

DEMO

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

There are multiple problems

  1. jQuery not included - select jQuery version in the first select box in left panel of fiddler
  2. ID must be unique - use class instead
  3. live is removed in 1.9, use .on() instead
  4. use mouseenter and mouseleave instead of mouseover and mouseout

So

$(document).ready(function () {

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


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

Demo: Fiddle

Upvotes: 2

Related Questions