3

If I append new div on the run, the newly created div doesn't get connected with event handler in document ready.

for example, http://jsfiddle.net/nFG24/

how to assign new div to current event handler in document ready?

NoOne
  • 171
  • 1
  • 12
  • 1
    Possible duplicate of [jQuery 1.7 on() and off() methods for dynamic elements](http://stackoverflow.com/questions/8029589/jquery-1-7-on-and-off-methods-for-dynamic-elements). You need to use `on()` (previously `live()` or `delegate()`) to handle events triggered on dynamic elements. – Frédéric Hamidi Mar 14 '12 at 09:56
  • have to use on (1.7) or live events – sandeep Mar 14 '12 at 10:04

3 Answers3

8

The shortcut event handlers (such as click(), mouseover() etc) will only apply to elements which are available to the DOM on page load. When appending elements dynamically you have to attach the event to a static parent element, and supply a filter which you wish to delegate events to, like this:

$("body").on('mouseover', '.hoverme', function() {
    $(this).css({backgroundColor: '#000'});                    
});
$("body").on('mouseout', '.hoverme', function() {
    $(this).css({backgroundColor: '#0af'});                 
});

Note that I've used body here as the primary selector. Ideally you should use the closest containing element to the .hoverme elements which is not dynamically appended to the DOM.

Working fiddle

Also, you can slightly tidy your code by using hover(): 

$("body").on('hover', '.hoverme', function(e) {
    if (e.type === 'mouseenter')
        $(this).css({backgroundColor: '#000'}); 
    else
        $(this).css({backgroundColor: '#0af'});          
});

Example fiddle

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
1

Have you tried using .on() yet ? or .bind() in older versions of jQuery 1.7- ?

.on()

Description: Attach an event handler function for one or more events to the selected elements. http://api.jquery.com/on/

.bind()

Description: Attach a handler to an event for the elements.

http://api.jquery.com/bind/

mas-designs
  • 7,498
  • 1
  • 31
  • 56
0

Or use live(). This is available for jquery 1.4+, it's deprecated in 1.7 but still works

$(".hoverme").live('mouseover', function()
{
    $(this).css({backgroundColor: '#000'});                    
});
$(".hoverme").live('mouseout', function()
{
    $(this).css({backgroundColor: '#0af'});                   
});
Marius Ilie
  • 3,283
  • 2
  • 25
  • 27
  • thx. it works too, but is there any drawback by using deprecated event handler? – NoOne Mar 14 '12 at 10:18
  • Yes - if you upgrade to a newer version of jQuery in future it may not work. `delegate()` is a better alternative to `live()`, although that too has now been superceded by `on()` in jQuery 1.7. – Rory McCrossan Mar 14 '12 at 10:25
  • this is good to use if you use some sort of CMS platform where you can't just upgrade the jquery without breaking other functionality and you have to stick with older jquery versions – Marius Ilie Mar 15 '12 at 09:48