Problem selecting an inserted element
I want to select the element which I inserted with after()
, but I can't select it.
In the Firebug console I can use $('.new-tree-node-close')
to get <span.new-tree-node-close>
, but in my page I can't get it.
<ul>
<li class="tree-l2"><a class="reference internal" href="#">One</a></li>
<li class="tree-l2"><a class="reference internal" href="#">Two</a></li>
<li class="tree-l2"开发者_StackOverflow中文版><a class="reference internal" href="#">There</a></li>
<li class="tree-l2-new">
<div class="new-tree-node-l2">New</div>
</li>
</ul>
$(document).ready(function() {
//When User click 'New',remove it and insert new input box and 'Close'
$('.new-tree-node-l2').click(function(event) {
$(this).parent(':last').after('<input name="" class="new-tree-node-title"><span class="new-tree-node-close">[Close]</span>');
$(this).remove();
});
//When user click the 'Close',do something..
$('.new-tree-node-close').click(function(event) {
alert("Do Something...");
});
});
Here is the main code and more detail in the jsfiddle.
Change the code to
//When user click the 'Close',do something..
$('.new-tree-node-close').live('click', function(event) {
alert("Do Something...");
});
using live instead of click.
精彩评论