Click event doesn't work while trying to dynamically add elements to <ul> tag

195
November 26, 2016, at 6:51 PM

I'm trying to create a list in which after you click on it there are added new li tags into it but nothing happens after you click li tag. When I try to do it this way:

$('ul').click(function(){
    $("ul").append('<li>aaaaaaaaaaa</li>');
    }).children().click(function(e) {
       return false;
    });

Everything seems ok. When I click on list body new element is added and when I click on previously declared li tag nothing happens. But after clicking on element newly added to the list another new element is being added. Why is that and what can I do about it?

Answer 1

Your code only applies the .click(function(e) { return false; }); handler to those children that already existed when you applied the other click handler.

jQuery supports a dynamic event binding approach that will automatically bind the handler to new nodes:

$('ul')
.on('click', function(e) {
   $(this).append('<li>aaaaaaaaaaa</li>');
})
.on('click', 'li', function(e) {
   return false;
});

This should bind a click event to ul that creates a new li, while also binding an event handler for all lis under the ul no matter if they are dynamically created or not.

You can read more about the .on method in the jQuery API documentation.

$('ul') 
.on('click', function(e) { 
   $(this).append('<li>aaaaaaaaaaa</li>'); 
}) 
.on('click', 'li', function(e) { 
   return false; 
});
ul { 
    border: 1px solid red; 
} 
 
li { 
    border: 1px solid black; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
</ul>

Answer 2

While Brendan's answer is valid I suggest to get rid of the second function and use following approach instead:

$('ul') 
.on('click', function(e) { 
    if(e.target === this){ 
       $(this).append('<li>aaaaaaaaaaa</li>'); 
    } 
})
ul { 
    border: 1px solid red; 
} 
 
li { 
    border: 1px solid black; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
</ul>

Answer 3

$('ul') 
.on('click', function(e) { 
   $(this).append('<li>aaaaaaaaaaa</li>'); 
}) 
.on('click', 'li', function(e) { 
   alert(); 
});
ul { 
    border: 1px solid red; 
} 
 
li { 
    border: 1px solid black; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
</ul>

READ ALSO
Html5 audio doesn&#39;t play in Cordova App

Html5 audio doesn't play in Cordova App

I'm working on a legacy codebase which is a jquery app running a skinned version of pacmanThe background audio works fine but the sound effects do not

248
drag div is creating more divs

drag div is creating more divs

Im trying to drag somedraggable divs and drop inside

185
&#39;Responsive&#39; and &#39;fixed on top&#39; table header: from jQuery to AngularJS

'Responsive' and 'fixed on top' table header: from jQuery to AngularJS

I am working on a table and I want to achieve that it's header stays fixed at TOPI have tried doing an implementation in jQuery and it seems to be working but

210
Make a tall image responsive with snap scrolling

Make a tall image responsive with snap scrolling

I have a high resolution image I want to use for a simple yet responsive "coming soon page" The image is 3 times taller than it is wide and itself contains a logo and some centered text strewn across three panes as in this example

270