Question

I have an event, which inserts on the page new DOM element.
How to add event to this new element?
My goal is: when user clicks on the input, old value should purge.
I have tried this:

$('a').on('click', function() {
    var newel = '<input type="text" value="test" />';
    $(newel).insertAfter($('a'));

});
$('input').on('focus', function() {
    alert($(this).val());
    $(this).val('');
});​

http://jsfiddle.net/WpyUf/
New event doesn’t added to the element, why?

Answer 1

Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready.

$('a').on('click', function() {
    var newel = '<input type="text" value="test" />';
    $(newel).insertAfter($('a'));
});
$(document).on('focus', 'input', function() {
    $(this).val('');
});​

FIDDLE