Проблема с выбором вставленного элемента

Question

Я хочу выбрать элемент, который я вставил с помощью after(), но не могу выбрать его.

В консоли Firebug я могу использовать $('.new-tree-node-close'), чтобы получить <span.new-tree-node-close>, но на своей странице я не могу его получить.

<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...");
    });
});

Вот основной код и более подробная информация в jsfiddle.

Answer 1

Измените код на

//When user click the 'Close',do something..
$('.new-tree-node-close').live('click', function(event) {
    alert("Do Something...");
});

с использованием live вместо клика.