javascript - jQuery working with elements added dynamically with no refresh -


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.