Jason
Jason

Reputation: 1307

How come my JQuery script doesn't work?

I am not sure why this doesn't work, all the articles I read online make it seem like this should work. Well, here's my html code: ()

<!doctype html>
<html>
<head>
<script src = "http://code.jquery.com/jquery-latest.min.js" type = "text/javascript"></script>
<script src = "showmotto.js" type = "text/javascript"> </script>
</head>

<body>

<table>

<?php

    $pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');
    $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);  
    $sth = $pdo->query('SELECT * from users');
    $sth->setFetchMode(PDO::FETCH_ASSOC);   

    while( $row = $sth->fetch() )
    {
        echo "<tr><td class = \"users\" data-motto = '{$row['motto']}' >{$row['username']}</td></tr>";      
    }

    $pdo = null;

?>

</table>

</body>

</html>

And here is show-motto.js. My goal is to alert the user when they mouseover on the table with the information in data-motto. But I haven't gotten that far yet, because for some reason the mouseover event isn't working

$('td.users').live('mouseover', function()
    alert(0);
});

I've also tried $('.users') but it doesn't work either.

What am I doing wrong?

Upvotes: 0

Views: 1671

Answers (2)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382102

In the latest version of jQuery, live has been removed.

What you can do is this :

$(document).on('mouseover', 'td.users', function() {
    alert(0);
});

or, as the elements are all created initially :

$(function(){
   // put all your code inside this block
   $('td.users').on('mouseover', function() {
      alert(0);
   });
});

Another solution, similar to the second one, would be to have all your JS code in a script element located at the end of the body (that is after the table).

You also add a missing opening bracket. This problem you should have detected using the console of your browser where all errors are displayed.

Upvotes: 4

GautamD31
GautamD31

Reputation: 28763

Because live function is deprecated from the recent versions of jquery ...instead of that use on like

$(function(){
    $('td.users').on('mouseover', function()
        alert(0);
    });
})

or

$(document).ready(function(){
    $('td.users').on('mouseover', function()
        alert(0);
    });
})

Upvotes: 1

Related Questions