i have built web app working on interface facing challenge of working elements added canvas dynamically jquery.
eg.
$(document).ready(function(){ //on focus textarea of sheet $("textarea").focus(function(){ $(this).css("height", "250px"); }); $("textarea").focusout(function (){ $(this).css("height", ""); }); });
now part works fine , expands , shrinks textarea
required. (all there!)
however problems occur, have onclick
appends
new textarea
elements canvas.
now can't use .focus
on or .focusout
matter. when use .appendto
page doesn't refresh. (new elements added out refresh)
how can around problem (correct way), need $("textarea").focus
able work newly added elements.
thanks!
bind them using delegates jquery's on.
$("body").on("focus","textarea",function(){ $(this).css("height", "250px"); }); $("body").on("focusout","textarea",function (){ $(this).css("height", ""); });
this delegate focus , focusout events matching selector ("textarea") when events occur in selector ("body"). if there closer element body select parent of event delegation ideal, although not possible depending on dynamic nature of page.