I am trying to retrieve the value from a dynamically created LI element.
After some research, I came across this helpful answer that explains how to achieve it in a normal scenario.
The following code is working perfectly for the two existing elements within my LI:
<ul class="nav nav-pills nav-stacked" id="listPreReq" style="height: 200px; overflow: auto" role="menu">
<li class="active"><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
$("#listPreReq li").click(function() {
alert($(this).html());
});
However, when I try to add more elements to the LI dynamically, those new elements do not trigger the $("#listPreReq li").click event. I'm unsure about the reason behind this behavior. You can check out a live demo here.
$('#btPre').click(function(e) {
var Psize= $("#listPreReq").find("li");
Psize = Psize.size()+1;
$("#listPreReq").append('<li><a href="#">Page '+Psize+'</a></li>');
});