Bir dinamik elemandan metin kutusunu gizle jQuery C#

Question

Aşağıda benim kodum, dinamik öğeleri gizlemeye ve göstermeye çalışıyorum. Sahip olduğum problem, sadece gizli div'umun yalnızca "Diğer" i kontrol ettiğimde bir kerede gösterilmesini istiyorum. Ancak, aşağıdaki kod, sahip olduğum tüm #dynamicRows numaralı numaralar için gizli div gösterecektir. Ben iki veya daha fazla #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(); 

      }); 
     } 
    } 
}); 

Aşağıda i html kodunu gösteriyorum yardım amaçlı dinamik satırlar vardır, ancak mevcut değil olduğunda bu yüzden eklenen ilk 1st #dynamicRow için çalışır, sorun ekran, bir kullanıcı aşağıdaki kodu oluşturmak için "EKLE" yi tıklayacaktır. Dinamik satır oluştururken sorunum yok ve bu yüzden gönderiyorum. radyo düğmemdeki adı C# ile oluşturulur ve her şey çalışır. Yine sorun dinamik bir satırın nasıl oluşturulacağı değil, C# 'de güzelce halledilir.

Dinamik satır bir ile çalışır jQuery yukarıda:

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

Dinamik satır iki Yukarıdaki Jquery ile çalışmıyor ve ben radyo düğmesini kontrol eğer öyleyse o kendi yukarıdaki formu olaylarını alır

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

Answer 1

Working Example

: satır 2, 1 dinamik satır o olay ve tam tersi tepki

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

Ayrıca C# kodu tarafından oluşturulan dinamik satırlara idclass ekleyip değil:id bir sınıf tarafından yinelenen olanların yerine, aynı belgede benzersiz olmalıdır yılında Sonra

<div class="dynamicRow"> 

senin js bu sınıfı kullanın:

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

Bu yardımcı olur umarım.

Answer 2

bu deneyin:

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

O ne istediğini bir çalışma örneğidir. Sadece js ile gerekli olanı üretiyorum.

Az Puan

1. Eğer dinamiğinin ebeveyne olay dinleyicisi eklemek söz oluşturulan içerik için. Kimliklerinin
2. kullanmaktan kaçının gittikleri değilse benzersiz olması ve

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>

gerekirse sınıfları ve sözde seçiciler tercih

daha kimlik atayabilmeli istiyorsanız