Class selectors on javascript generated content

Question

Class selectors on javascript generated content

It was a posting question, George's link to the previous question answered

I have a problem where selectors don't work with dynamically generated javascript content.

The original work is just fine. When the for loop generates more divs, even though they got the same class, the css "hover" style will not be applied.

The code that generates divs:

    for (x; x < y; x++) {
        output = output + '<div class="over">'+
            'But not for these generated divs'+ 
            '</div>';
    }
   $("#content").html(output);

Code that styles divs with class "over":

$(".over").hover(function () {
    $(this).addClass("styling");
});


$(".over").mouseout(function () {
    $(this).removeClass("styling");
});

http://jsfiddle.net/kjhansen/1e08ypms/28/

+3

javascript jquery html css

Kevin H 23 oct. 14 at 13:04

source to share

1 answer

Think Different · Accepted Answer · 2014-10-23T13:11:33+0000

Use jQuery on()

Try this:

$(document).on('mouseover','.over',function () {
    $(this).addClass("styling");
});


$(document).on('mouseout','.over',function () {
    $(this).removeClass("styling");
});

EXAMPLE FIDDLE

Class selectors on javascript generated content

More articles: