0

これは繰り返しの質問かもしれませんが、私は 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="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();
}

};

全体として、私はさまざまな診療所名とその診療所内の医師のグループを把握しようとしています. これを達成する別の方法があれば、私は新しいアイデアを受け入れます。私はこれに長い間立ち往生しています。

前もって感謝します。

4

2 に答える 2

0

はい、イベントデリゲートを設定します

$('#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-12T14:31:46.503 に答える
0

委任を使用する必要があります。

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

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

});
于 2013-06-12T14:32:39.260 に答える