動的要素からテキストボックスを非表示にするjQuery c＃

Question

以下は私のコードです。私は動的要素を隠して表示しようとしています。私が抱えている問題は、「他人」だけをチェックすると、私の隠されたdivが一度に1つしか表示されないようにすることです。ただし、下のコードは、私が持っている#dynamicRowsのすべての番号のための隠しdivを表示します。私は2つ以上の#dynamicRows

$('#dynamicRow').on('click', 'input[id^=race]', function() { 
    if ($(this).is(":checked")) { 
     if ($(this).val() == "Other") { 
      $(".cssclass").each(function (index) {      
       $(this).closest("div").show(); 
      }); 

     } 
     else { 
      $(".cssclass").each(function() { 
       $(this).closest("div").hide(); 

      }); 
     } 
    } 
}); 

以下は、私はhtmlコードを示していたヘルプ目的のための動的行が、ある、しかし、それは上に存在しないを持っているときに、それは追加の初期第一#dynamicRowのために働く、問題があります画面では、ユーザーは「追加」をクリックして下のコードを生成します。私は動的行を生成する上で問題はなく、なぜ私が転記しているのではないのですか？私のラジオボタンの名前はC＃によって生成され、すべてが機能することに注意してください。ここでも問題は動的行を作成する方法ではなく、C＃でうまく処理されています。

1は、jQueryの上記で動作する動的な行：2は、上記のjqueryのでは動作しませんし、私はラジオボタンをチェックするので、もしそれが、自身のとして上記フォームイベントを取る

<div id="dynamicRow"> 
    <input type="radio" value="No" id="race[]" name="Person[hhhhhh].race"> No: 
    <input type="radio" value="Other" id="race[]" name="Person[hhhhhh].race"> Other: 

    <div id="iamhidden" class="cssclass"> 
     I appear one at a time, when other radio button is checked 
    </div>  
</div> 

動的な行は、行2、第1動的な行は、イベントおよびその逆に応答：

Answer 1

<div id="dynamicRow"> 
    <input type="radio" value="No" id="race[]" name="Person[hhhhh].race"> No: 
    <input type="radio" value="Other" id="race[]" name="Person[hhhhh].race"> Other: 

    <div id="iamhidden" class="cssclass"> 
     I appear one at a time, when other radio button is checked 
    </div>  
</div> 

Working Example

idは、同じ文書内で一意であるクラスで重複するものを置き換える必要があります。

<input type="radio" value="No" class="race" name="Person[hhhhhh].race"> No: 
<input type="radio" value="Other" class="race" name="Person[hhhhhh].race"> Other: 

はまた、あなたのC＃のコードによって生成された動的な行にclassなくidを追加します。

<div class="dynamicRow"> 

その後、あなたにjsはこのクラスを使用します：

$(".cssclass").hide(); 
$('.dynamicRow').on('click', '.race', function() { 
    if ($(this).val() == "Other") { 
     $(this).next(".cssclass").show(); 
    } else { 
     $(this).nextAll(".cssclass").hide(); 
    } 
}); 

これが役に立ちます。

Answer 2

これを試してみてください：

$('body').on('click', '#dynamicRow', function() { 
    if ($(this).find('[value=Other]').is(":checked")) { 
     $(".cssclass").each(function (index) {      
      $(this).closest("div").show(); 
     }); 
    } else { 
     $(".cssclass").each(function() { 
      $(this).closest("div").hide(); 
     }); 
    } 
}); 

Answer 3

彼は、あなたが何を望むかの実施例です。私はjsだけで必要を生成しています。

1. を言及する

   いくつかのポイントあなたはダイナミックの親にイベントリスナーを追加したコンテンツを生成しました。

2. IDの使用は避けてください、彼らがユニークであることを行っていない場合、あなたはそれ以上にIDを割り当てる場合

var counter = 0; 
 
function addNewEntry(){ 
 
    ++counter; 
 
    var str = '<div class="dynamicRow"><input type="radio" value="No" id="race[]" name="Person[hh'+counter+'].race"> No:<input type="radio" value="Other" id="race[]" name="Person[hh'+counter+'].race"> Other:<div id="iamhidden" class="cssclass"> I appear one at a time, when other radio button is checked</div> </div>'; 
 
    $('#dynamicRowContainer').append(str); 
 
    $("#dynamicRowContainer .dynamicRow:last-child .cssclass").hide() 
 
} 
 
$('#dynamicRowContainer').on('change', '.dynamicRow > input', function() { 
 
    if(this.value=="Other"){ 
 
     $(this).siblings('.cssclass').show(); 
 
    }else{ 
 
     $(this).siblings('.cssclass').hide(); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="addNewEntry()">Add New Entry</button> 
 
<div id="dynamicRowContainer"> 
 

 
</div>