Ok here the jsfiddle example

/

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

Ok here the jsfiddle example

http://jsfiddle/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

• javascript
• jquery
• event-delegation

3 Answers 3

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

You can also wrap the mouse over event in a function, and call it whenever you add new elements that you want to be affected. That way the issue WickyNilliams pointed out won't 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();
}

The div you want to create onclick, is not closed with the '< / div >' tag.

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'); 
            })
        );
    });
});