JQuery for an event is optional for non existing elements

Question

Ok here is a jsfiddle example

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

As you can see, when you hover the mouseover event does not fire

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 should use a "delegate" like this (to provide a "live") $('body').on('mouseover', '#super', function (event) {

Answer 2

You can also wrap the mouse over an event in a function and call it whenever you add new elements that you want to influence. So the problem that WickyNilliams pointed out will not affect you.

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

Answer 3

The deb that you want to create onclick does not close with </div> '.

What if you try the following code:

 $(function () { $('#superdiv').on('click', function (event) { $('body').append( $('<div/>',{ 'id' : 'super', 'text' : 'tetet'}).mouseover(function(event) { alert('test'); }) ); }); });