jquery - Why is on blur and focus not working on appended input textfield? -
ers. can explain me why blur , focus events aren't working on appended input textfields?
as can see in jsfiddle. input fields created in html seem listen blur , focus event. when append input textfield using append button, input textfields don't listen blur/focus events.
html
<input class="input" value="value 1"> <input class="input" value="value 2"> <div id="appendinput">append 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 explain me why isn't working appended input textfields? thank in advance.
you need delegate event parent of dynamically added elements using on.
$(document).on('focus', '.input', function () { thisvalue = $(this).val(); $(this).attr("value", ""); });
delegated events have advantage can process events descendant elements added document @ later time. picking element guaranteed present @ time delegated event handler attached, can use delegated events avoid need attach , remove event handlers, reference.
Comments
Post a Comment