class selectors on javascript generated content

Question

This was a dublicate question, George's link to a previous question had my answer

I'm having an issue where selectors aren't functioning with dynamically generated javascript content.

The initial works just fine. Once the for loop generates more div's, even though it's got the same class, the 'mouseover' css styling won't apply.

Code that Generates the divs:

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

Code that styles the divs with class "over":

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


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

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

Sorry to be rude, but how the f did that question got 3 upvotes when is is asked 100 times a day? — Karl-André Gagnon, Oct 23 '14 at 13:10
Also related : http://stackoverflow.com/questions/4772287/does-jquery-have-a-handleout-for-delegatehover — Karl-André Gagnon, Oct 23 '14 at 13:12

score 0 · Accepted Answer · answered Oct 23 '14 at 13:11

0

Use jQuery on() Try this:

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


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

FIDDLE EXAMPLE

answered Oct 23 '14 at 13:11

Think Different

2,815
1
12
18

or `$(document).on('mouseover mouseout','.over',function () { $(this).toggleClass("styling"); });` – dsgriffin Oct 23 '14 at 13:17

class selectors on javascript generated content

1 Answers1