將文本框添加到HTML並與JQuery一起使用

Question

這可能是一個重復的問題，但是我對JQuery還是陌生的，我發現的答案沒有幫助。 是否可以使用JQuery添加包含輸入字段的HTML，然后在JQuery中使用該輸入字段？ 這是我的具體問題：

我有以下HTML代碼：

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

如果用戶單擊div id =“ TextBoxAdd1”，我想向div id =“ practiceGroup”添加另一個div id =“ practice2”，依此類推。 唯一的問題是，當我添加HTML時，我無法使用＃practice2作為JQuery中的選擇器。 要將HTML添加到div id =“ practiceGroup”，我使用JQuery .append（）。 我嘗試使用document.createElement，但這似乎也不起作用。

因此，每當使用id =“ practiceX”創建一個新的div時（其中X是數字），我的JQuery都將無法使用。 我需要從每個輸入字段獲取值。 另外（次要）我對設置值的輸入字段具有模糊和聚焦功能。 當用戶在輸入字段中單擊時，該值消失了應該起作用。 這適用於第一個輸入字段，但是當添加新的輸入字段時，該功能不起作用。

這是我的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();
}

};

總體而言，我正在嘗試捕獲該實踐中的不同實踐名稱和一組醫師。 如果有其他方法可以做到這一點，那么我會提出新的想法。 我已經堅持了很長時間。

提前致謝。

Answer 1

是的，設置活動代表

$('#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

您需要使用一些委托：

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

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

});