how do I call a jquery function on a button click

Hi,
with the help of an expert, I am using a plugin to have a character count on some textbox's.

It works (almost)  The problem is when a new textbox is created the character function is not getting called. Its only when the page does a roundtrip to the server does the character count function work.

Does anybody know whats going on.

Here is the relevant code
Thanks!
<script language="javascript">
$(document).ready(function(){  
     $('textarea[maxlength]').keyup(function(){  
       var max = parseInt($(this).attr('maxlength'));  
       if($(this).val().length > max){  
             $(this).val($(this).val().substr(0, $(this).attr('maxlength')));  
        }  

        $(this).parent().find('.charsRemaining').html('You have ' + (max - $(this).val().length) + ' characters remaining');  

    });  

 }); 
</script>

<!---Makes a new file, textbox and texarea when the "add worksample button is clicket--->

function add_work_sample(rpid) {

	file_number["p" + rpid]++;
	$("#work_samples_container_p" + rpid).append('<tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>File:</h5><input type="file" name="userfile_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="userfile_p' + rpid + '_n' + file_number["p" + rpid]  + '"  size="20"  maxlength="70"/></td><td><a class="delete_new_worksample_link" id="delete_n' + file_number["p" + rpid]  + '"><img src="images/Remove-icon.jpg" title="Delete" width="40" height="40" border="0" style="cursor:pointer;" /></a>Delete</td></tr><tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>Title:</h5><input type="text" name="txtbrowsetitle_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="title_p' + rpid + '_n' + file_number["p" + rpid]  + '"size="50" /></td></tr><tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>Description:</h5><div><textarea maxlength="200" name="descriptionTextbox_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="descriptionTextbox_p' + rpid + '_n' + file_number["p" + rpid]  + '" rows="5" cols="50"></textarea><br /><p class="charsRemaining"></p></div></td></tr>');



<!---Button to add new "worksample" --->
<input name="button" type="button" value="Add Worksample" class="submitbtn" onclick="add_work_sample(#qprojects.req_part_id#)"  onmouseover="this.className='submitbtn submitbtnhov'" onmouseout="this.className='submitbtn'"/>

Open in new window

smfmetro10Asked:
Who is Participating?
 
BurniePConnect With a Mentor Commented:
You could put the javascript in a function, then call the function every time you add a textbox.

I have modified your code below to reflect my idea.
<script language="javascript">
$(document).ready(function(){  
     SetCharCount();
 }); 

function SetCharCount() {
$('textarea[maxlength]').keyup(function(){  
       var max = parseInt($(this).attr('maxlength'));  
       if($(this).val().length > max){  
             $(this).val($(this).val().substr(0, $(this).attr('maxlength')));  
        }  

        $(this).parent().find('.charsRemaining').html('You have ' + (max - $(this).val().length) + ' characters remaining');  

    });  

}
</script>

<!---Makes a new file, textbox and texarea when the "add worksample button is clicket--->

function add_work_sample(rpid) {

	file_number["p" + rpid]++;
	$("#work_samples_container_p" + rpid).append('<tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>File:</h5><input type="file" name="userfile_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="userfile_p' + rpid + '_n' + file_number["p" + rpid]  + '"  size="20"  maxlength="70"/></td><td><a class="delete_new_worksample_link" id="delete_n' + file_number["p" + rpid]  + '"><img src="images/Remove-icon.jpg" title="Delete" width="40" height="40" border="0" style="cursor:pointer;" /></a>Delete</td></tr><tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>Title:</h5><input type="text" name="txtbrowsetitle_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="title_p' + rpid + '_n' + file_number["p" + rpid]  + '"size="50" /></td></tr><tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>Description:</h5><div><textarea maxlength="200" name="descriptionTextbox_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="descriptionTextbox_p' + rpid + '_n' + file_number["p" + rpid]  + '" rows="5" cols="50"></textarea><br /><p class="charsRemaining"></p></div></td></tr>');
    SetCharCount();
}


<!---Button to add new "worksample" --->
<input name="button" type="button" value="Add Worksample" class="submitbtn" onclick="add_work_sample(#qprojects.req_part_id#)"  onmouseover="this.className='submitbtn submitbtnhov'" onmouseout="this.className='submitbtn'"/>

Open in new window

0
 
Lukasz ChmielewskiCommented:
http://api.jquery.com/live
This is the way of applying jQuery to dynamic elements.
0
 
smfmetro10Author Commented:
Thanks for the reply.

I tried your example. It's not generating any errors, but it doesnt quite work (but I like your idea)
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
Gurvinder Pal SinghCommented:
when you create an element, you have to do the fresh bindings anyways.
So when the new textbox is generated, call that event binder method again
0
 
P1ST0LPETECommented:
"It works (almost)  The problem is when a new textbox is created the character function is not getting called. Its only when the page does a roundtrip to the server does the character count function work."

This is because your $('textarea[maxlength]').keyup() functionality is only being applied to the textboxes that exist when $(document).ready() is initiated.  Any textboxes created after $(document).ready() completes needs to have this functionality applied to it.

This is what gurvinder372 was talking about when saying "you have to do the fresh bindings, so call that event binder method again"

meaning: recall the "SetCharCount()" function that BurnieP wrote in his post.
0
 
smfmetro10Author Commented:
Ah, Ok. I dont know how to do that (Im incredibly new to this)
0
 
smfmetro10Author Commented:
Sorry for the confusion. Completley my fault (Had some syntax wrong) This works perfectly!!!
Thanks for the help!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.