I'm experiencing an issue with a HTML form where a new input field is generated when a button is clicked, but the dynamically created field is not styled properly.
Below is the HTML form code:
<form id="form">
<input type="text" id="enter"/><br>
</form>
<button id="add_field" class="button"">Add button</button>
The jQuery script that successfully generates a new field:
$('#add_field').click(function(){
$('#form').append("<input type='text' id='enter2' />");
});
And here is the JavaScript to style all text fields when clicked:
$('input:text').focusin(function (){
$(this).css('background-color', '#E3F3FF').css('border', '1px solid #0085F0');
});
$('input:text').blur(function (){
$(this).css('background-color', '#fff').css('border', '1px solid black');
});
While this styling works for all initially entered fields in the HTML code, it does not apply to dynamically generated fields.