Why is on blur and focus not working on appended input textfield?

Why is on blur and focus not working on appended input textfield?

ers. Can anyone explain to me why blur and focus events aren't working on
appended input textfields?
As you can see in this JSFIDDLE. The input fields created in html seem to
listen to the blur and focus event. But when you append an input textfield
using the append button, suddenly the input textfields don't listen to the
blur/focus events.
HTML
<input class="input" value="value 1">
<input class="input" value="value 2">
<div id="appendinput">Append a input textfield</div>
<div id="inputcontainer"></div>
jQuery
var counter = 0;
$("#appendinput").click(function () {
$('<input class="input" value="value 3" type="text" id="input' +
(counter) + '"/>').appendTo('#inputcontainer');
counter++;
});
$('.input').on('focus', function () {
thisValue = $(this).val();
$(this).attr("value", "");
});
$('.input').on('blur', function () {
if ($(this).val() === "") {
$(this).val(thisValue);
}
});
Can you explain to me why this isn't working for the appended input
textfields? Thank you in advance.