asked on

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

Lukasz Chmielewski

http://api.jquery.com/live
This is the way of applying jQuery to dynamic elements.

ASKER CERTIFIED SOLUTION

BurnieP

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

smfmetro10

ASKER

Thanks for the reply.

I tried your example. It's not generating any errors, but it doesnt quite work (but I like your idea)

Gurvinder Pal Singh

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

P1ST0LPETE

"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.

smfmetro10

ASKER

Ah, Ok. I dont know how to do that (Im incredibly new to this)

smfmetro10

ASKER

Sorry for the confusion. Completley my fault (Had some syntax wrong) This works perfectly!!!
Thanks for the help!!