Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Jquery .live deprecated, can't get .on to work with run time elements

Jquery .live deprecated, can't get .on to work with run time elements


I'm using nodejs with, express, jade, jsdom, Jquery and mongoose and I have page elements being loaded in client side via a event from the server (which goes off scraping a few pages to get various things)

It all works and everything gets loaded in fine, but I need the run time loaded elements (either divs, list or table [i've tried them all]) to be used with jquery, after doing a bit of research I found jQueries .live, which was removed in version 1.9. So I tried the following...

$('.vid_item').on('mouseover', function(event) {
    if (event.type == 'mouseover') {
        alert('Yay, mouse-over on the loaded element');
    } else {
        // do something on mouseout

As a test I have a '.vid_item' div in the jade layout, loaded alongside the rest of the page, and the mouse over event works perfectly on that element, but still doesn't work the items loaded in after the server comes back with it's data and fires the event to add items to the page.

Am I missing something? Can provide other bits of code from the project if needs be!

Cheers in advance!

Problem courtesy of: turtle342


Use it like this :

 $(document.body).on('mouseover', '.vid_item', function(event) {

The jQuery set receives the event then delegates it to elements matching the selector given as argument. This means that contrary to when using live, the jQuery set elements must exist when you execute the code. You may replace document.body with any element existing when you do the binding and in which your '.vid_item' element will be.

Solution courtesy of: Denys Séguret


View additional discussion.

This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

Jquery .live deprecated, can't get .on to work with run time elements


Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription