Jquery on event is not binding for non existing elements

Question

Ok here the jsfiddle example

http://jsfiddle.net/HTjCT/1/

As you can see you when you hover it is not firing mouseover event

how can i solve this problem ?

i am using Jquery 1.9

<div id='superdiv'>Click Me</div>


$(function () {
    $('#superdiv').on('click', function (event) {
        $('body').append('<div id="super">another');
    });
    $('#super').on('mouseover', function (event) {
        alert('not working');
    });
});

javascript

Answer 1

You have to use "delegate", like this (to supply "live") $('body').on('mouseover', '#super', function (event) {