Added elements to a page not being recognized by jQuery
I feel like I'm making a newbie mistake. I'm trying to be able to add a row to a table that has an input field which is being masked by a plugin. Here's some pseudo code.
-
<script type="text/javascript">
$(function() {
// sets up the masks on all input fields.
$('input').focus(function(){
$(this).css({
'border-color' : '#3d80DF',
'border-style' : 'solid',
'background-color' : '#deeef1'
});
})
$('input').blur(function(){
$(this).css({
'border-color' : '',
'border-style' : '',
'background-color' : ''
});
})
// upon clicking on #spAddRow, add the row to the tBody which has the id #myTableBody
$('#spAddRow').click(function() {
$('#myTableBody').append('<tr><td><input name="myField" /></td></tr>');
})
})
</script>
I've attempted to put my .blur() and .focus() functions into a function I named scrape() which I call when the DOM is ready and then whenever adding a row but I run into an issue where it appends the function to that element causing multiple iterations.
Hopefully that makes sense. I assume jQuery has to have an easy way to do this without duplicating code and I'm just missing it. Thanks for any help!