mouseover function of jquery not working on dynamically created div

Question

I am trying to add a mouseover function to dynamically created elements using jquery

$('#schools').append(
    '<div class="mediumListIconTextItem" onclick="javascript:showSchoolReport(\'' + $.trim(this.id) + '\',\'' + $.trim(this.companyID) + '\',\'' + $.trim(this.companyCode) + '\',\'' + $.trim(this.companyName) + '\');" style="padding-left: 30px;margin: 5px;">' + '<div class="icon-newspaper mediumListIconTextItem-Image"></div>' + '<div class="mediumListIconTextItem-Detail">' + '<h6 id="header" style="max-width:100px; overflow:hidden;">' + this.name + ' - ' + this.companyName + '</h6></div></div>');

code for mouseover effect

$(document).ready(function (e) {
    $(".mediumListIconTextItem").mouseover(function () {
        alert($(this.name));
    });
});
$(".mediumListIconTextItem").on("mouseover", function () {
    alert('mouseover works!!!!!!!!!');
});
});

none of the above function for mouseover works. whats wrong with my code. suggest a solution

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Patsy Issa, Nov 06 '13 at 13:13

score 2 · Answer 1 · answered Nov 06 '13 at 13:14

2

This is the case called event delegation. In here you can't bind the direct event to a dynamically created elem. try this as below:

$(document).on("mouseover", ".mediumListIconTextItem", function() {
   alert('mouseover works!!!!!!!!!');
});

answered Nov 06 '13 at 13:14

Jai

74,255
12
74
103

can i get the id of element who initiated mouseover event – user2291144 Nov 06 '13 at 13:22
yes instead of `$(document)` you can change this with `$('#schools')`. – Jai Nov 06 '13 at 13:26

score 0 · Answer 2 · answered Nov 06 '13 at 13:12

You're almost there, you have to use on but in a different form. You're using direct event but you need to use delegated events

$('#schools').on("mouseover", ".mediumListIconTextItem", function() { .. }

For more details check section Direct and delegated events

score 0 · Answer 3 · answered Nov 06 '13 at 13:12

0

Use on() for dynamically added elements like,

$(document).on("mouseover", ".mediumListIconTextItem", function() {
       alert('mouseover works!!!!!!!!!');
});

answered Nov 06 '13 at 13:12

Rohan Kumar

40,431
11
76
106

score 0 · Answer 4 · answered Nov 06 '13 at 13:12

0

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$(document).on("mouseover", ".mediumListIconTextItem", function() { .code here. }

better use

$("#schools").on("mouseover", ".mediumListIconTextItem", function() { .code here. }

Syntax

$( elements ).on( events, selector, data, handler );

answered Nov 06 '13 at 13:12

Tushar Gupta - curioustushar

58,085
24
103
107

can i get the id of element who initiated mouseover event – user2291144 Nov 06 '13 at 13:24

score 0 · Answer 5 · edited May 23 '17 at 12:08

0

Use event delegation :

$('#schools').on('mouseover', '.mediumListIconTextItem', function(){ ... })

For a clear and short explanation of how event delegation works, see this question :

Direct vs. Delegated - jQuery .on()

edited May 23 '17 at 12:08

Community

1
1

answered Nov 06 '13 at 13:12

LeGEC

46,477
5
57
104

mouseover function of jquery not working on dynamically created div

5 Answers5