jQuery : dynamically created div ID can't be selected?

Question

$('#content').droppable({
    drop:function(event , ui){  
        $('<div>').appendTo('#content');
        $('#content div').load('div.html');
                             }
                        });

Below code doesn't select the divContainer ID

$('#divContainer').click(function(){
    $('#divContainer').hide(); 
});

This is my html page DIV.html

<div id="divContainer">
    SampleDIV  
 </div>

The DIv gets added to my page but i can't select the div using it's ID !

score 1 · Answer 1 · answered Apr 18 '13 at 06:05

1

Try using event delegation.

$("#content").on('click', '#divContainer', function () {
    $(this).hide();
});

answered Apr 18 '13 at 06:05

Explosion Pills

188,624
52
326
405

cool. It works. can you please explain me this ? thanks – sakthi Apr 18 '13 at 06:09
2

`$('#divContainer').click(function(){` calls the `.click` method on all existing `#divContainer` elements. If no `#divContainer` elements exist yet, this call doesn't actually do anything because there is nothing to bind to. Event delegation is designed for this purpose: so you can bind to an element that already exists but the event is only triggered during a match of the second argument during the capture phase. – Explosion Pills Apr 18 '13 at 06:12

score 0 · Accepted Answer · answered Apr 18 '13 at 06:06

the $('#divContainer').click code needs to go inside the done section once the data is loaded in

$('#result').load('div.html', function() {
    $('#divContainer').click(function(){
        $('#divContainer').hide(); 
    });
});

or use on() as Explosion Pills said

jQuery : dynamically created div ID can't be selected?

2 Answers2