Jquery and dynamic content -

i have following html code:

<div id="summary_form">     <textarea class="summary">please fill in</textarea><br/>     <textarea class="summary">please fill in</textarea><br/>    <div> 

and have following js code called on document.ready:

var summaries = $('textarea.summary'); 

this js grabs textareas class name 'summary' , stores in summaries variable.

i have link when users click on it, dynamically add textarea 'summary' class name using ajax, follows:

$("#add_summary").click(function(){     $('#temp').load("/addsummary.html", function() {   $("#summary_form").append($('#temp').html());   summaries = $('textarea.summary'); }); 

the addsummary.html contains following html:

<textarea class="summary">please fill in</textarea><br/> 

when form submitted, running following code clear textareas of "please fill in" helper text follows:

$("#user-form").submit(function () {  //first reload old , new textareas summary variable - part not working!  summaries = $('textarea.work_history_summary');   (var i=0; i<summaries.length; i++)     {       if (summaries[i].value == 'please fill in')       {            summaries[i].value = '';       }     }  }); 

but when form submits, original textareas cleared, newly added textareas not. reason, jquery not able see new textareas , store them in summary variable.

any idea may doing wrong?

thanks!

is possible load bit different - not textarea, or not summary? mistake?

additionally, consider using $.ajax() method:

$.ajax({     url: '/addsummary',     success: function(response) {         $('#summary_form').append(response);         summaries = $('textarea.summary');     } }); 

this way not need temporary storage, able append obtained html directly form. maybe fix issue. (i bit wrong parameter names or function arguments order, have got main idea, have not you?)