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

這可能是一個重複的問題，但我對JQuery非常陌生，我找到的答案沒有幫助。是否可以使用JQuery添加包含輸入字段的HTML，然後在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 = 「practice2」到div的ID =「practiceGroup」等。唯一的問題是，當我添加HTML時，我不能使用＃practice2作爲JQuery中的選擇器。要將HTML添加到div id =「practiceGroup」，我使用JQuery .append（）。我試過使用document.createElement，但似乎也沒有工作。

因此，無論何時創建一個新的div與id =「practiceX」其中是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(); 
} 

};

總體來說，我試圖捕捉實踐中醫生的不同做法名和組。如果有不同的方式來實現這一點，我願意接受新的想法。我剛剛被困在這個很長一段時間。

在此先感謝。

來源

2013-06-12 Sean McCully

您需要使用一些代表團：

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

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

});

來源

2013-06-12 14:32:39

謝謝你謝謝你謝謝...我一直在這個難題。 –

是成立了事件委託

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

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

來源

2013-06-12 14:31:46 Gabe

謝謝！完美地工作 –

爲什麼你改變你選擇的答案呢？ – Gabe

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

回答

相關問題