Add text boxes to HTML and use with JQuery

Question

This may be a repeat question, but I am very new to JQuery and the answers I've found are not helping. Is it possible to add HTML containing an input field with JQuery and then later used that input field with JQuery? Here is my specific problem:

I have the following HTML Code:

<div id="practiceGroup">

    <div id="practice1">

        <div class="textBoxContainer">
            <input class="formatTextWithin" name="practiceName1" id="practiceName1" value="Practice Name"/>
            <div id="tetBoxAdd1" class="textBoxAdd True" onClick="addPractice(1)"><div id="textBoxAddPlus1" class="textBoxAddPlus"></div></div>
        <div style="clear:both;"></div>             
        </div>

        <div class="textBoxContainer">
            <input class="formatTextWithinSmall" name="groupSize1" id="groupSize1"/>
            <p class="MUGroupText"><em>How many group of providers are in this practice?</em></p>
         <div style="clear:both;"></div>  
         </div>

    </div>

</div>

If a user clicks on div id="TextBoxAdd1" , I want to add another div id="practice2" to div id="practiceGroup" and so on. The only problem is when I add the HTML i cannot use #practice2 as a selector in JQuery. To add the HTML to div id="practiceGroup" I use JQuery .append(). I've tried using document.createElement, but that didn't seem to work either.

So whenever a new div is created with id="practiceX" where is X is the number, my JQuery will not work for. I need to get the values from each input field. Also (minor) I have blur and focus functions for the input fields with values set. It should work that when a user clicks in the input field, the value disappears. This works for the first input field, but when new ones are added, the function doesn't work.

Here is my JQuery:

var addnew = 2;

$(document).ready(function()
{
$(".formatTextWithin").focus(function inputFocus() 
{
    (this.value == 'Practice Name') && (this.value = '');   
});

$(".formatTextWithin").blur(function inputBlur() 
{
    (this.value == '') && (this.value = 'Practice Name');   
});

});

function addPractice(currentpractice){

if ($("#textBoxAddPlus"+currentpractice).hasClass('textBoxAddPlus'))
{
    $("#practiceGroup").append(

    '<div id="practice'+addnew+'">'+
        '<div class="textBoxContainer">'+
            '<input class="formatTextWithin" name="practiceName'+addnew+'" id="practiceName'+addnew+'" value="Practice Name"/>'+
            '<div class="textBoxAdd"><div id="textBoxAddPlus'+addnew+'" class="textBoxAddPlus" onClick="addPractice('+addnew+')"></div></div>'+
       '<div style="clear:both;"></div> '+
       ' </div>'+

       ' <div class="textBoxContainer">'+
           ' <input class="formatTextWithinSmall" name="groupSize'+addnew+'" id="groupSize'+addnew+'"/>'+
            '<p class="MUGroupText"><em>How many group of providers are in this practice?</em></p>'+
       '<div style="clear:both;"></div> '+
       ' </div>'+
    '</div>');

    $("#textBoxAddPlus"+currentpractice).removeClass('textBoxAddPlus');
    $("#textBoxAddPlus"+currentpractice).addClass('textBoxAddMinus');

    addnew ++;

}
else
{
    $("#practice"+currentpractice).remove();
}

};

Overall, I'm trying to capture different practice names and groups of physicians within that practice. If there's a different way to accomplish this, I'm open to new ideas. I've just been stuck on this for a long time.

Thanks in advance.

Answer 1

Yes set up event delegates

$('#practiceGroup').on('focus', '.formatTextWithin', function() 
{
    if(this.value == 'Practice Name' && this.value = '') { ... }   
});

$('#practiceGroup').on('blur', '.formatTextWithin', function() 
{
    if(this.value == '' && this.value = 'Practice Name') { ... }
});

Answer 2

You need to use some delegation:

$(document).ready(function () {
    $('#practiceGroup').on('focus', ".formatTextWithin", function () {
        //...
    });

    $("#practiceGroup").on('blur', ".formatTextWithin", function () {
        //...
    });

});