Удалить динамически добавленный элемент списка LI с помощью jQuery

Question

Я пытаюсь динамически добавлять элемент списка в список, а затем удалять его, нажимая на этот элемент. Событие удаления никогда не срабатывает. Однако, если я использую тот же код в статическом списке, он отлично работает. Я видел похожие решения, но они не работают.

См jsFiddle: http://jsfiddle.net/Lc2bC/

<input id="status" type="text" placeholder="Status (tab or enter)"> 

<br/> 
Dynamic List: 
<ul id="statusList"></ul> 


$('#status').keydown(function (e) { 
    if (e.which == 9 || e.which == 13) { 
     $('#statusList').html($('#statusList').html() + formatNewStatus(this.value)); 
     this.value = ""; 
     this.focus(); 
     e.preventDefault(); 
    } 
}); 

$(function() { 
    $('#statusList li').click(function() { 
     alert('dynamicList'); 
     $(this).remove(); 
    }) 
}); 

Answer 1

Это потому, что функция click() связывается только с элементами, которые существуют в йот в то время это называется.

live() - это старая техника, но устарела и не будет поддерживаться в будущих версиях.

Что вам нужно использовать это on()

$(function() { 
    $('#statusList').on('click', 'li', function() { 
     alert('dynamicList'); 
     $(this).remove(); 
    }); 
}); 

Answer 2

click функция связывается только с элементами, которые присутствовали, когда она была вызвана. Вместо этого используйте on().

на()

Присоединить функцию обработчика событий для одного или нескольких событий для выбранных элементов.

http://api.jquery.com/on/

Answer 3

Использование на http://api.jquery.com/on/

$(function() { 
    $('#statusList').on("click", "li", function() { 
     alert('dynamicList'); 
     $(this).remove(); 
    }) 
}); 

FIDDLE