Question

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"><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.

Answer 1

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.