Verstecken Textfeld von einem dynamischen Element anzeigen jQuery C#

Question

Unten ist mein Code, ich versuche, dynamische Elemente zu verstecken und zu zeigen. Das Problem, das ich habe, ist, ich möchte nur, dass mein verstecktes div nur eins nach dem anderen zeigt, wenn ich nur "Andere" ankreuze. Der Code unten zeigt jedoch das versteckte Div für alle #dynamicRows Ich habe. so ist es für die anfängliche erste Werk #dynamicRow hinzugefügt, das Problem ist, wenn ich zwei oder mehr #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(); 

      }); 
     } 
    } 
}); 

Dies sind dynamische Zeilen, um Hilfe Zwecke i den HTML-Code zeige, jedoch existiert es nicht auf die Bildschirm, ein Benutzer wird auf "ADD" klicken, um den folgenden Code zu generieren. Ich habe kein Problem, dynamische Reihe zu erzeugen, und es ist nicht warum ich posten. Beachten Sie, dass der Name in meinem Optionsfeld von C# generiert wird und alles funktioniert. Das Problem besteht nicht darin, eine dynamische Zeile zu erstellen, sondern in C#.

Dynamische Reihe arbeitet man mit dem oben 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> 

Dynamische Reihe zwei nicht mit dem oben Jquery arbeiten und es nimmt die oben genannte Form Ereignisse als seine eigenen, so dass, wenn ich die Taste Radio einchecken Reihe 2, reagiert die dynamische 1. Reihe zu diesem Ereignis und umgekehrt:

<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

id sollte von einer Klasse in demselben Dokument, ersetzen Sie die doppelt diejenigen eindeutig sein:

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

Auch class hinzufügen und nicht id auf die dynamischen Zeilen von C# -Code generierten:

<div class="dynamicRow"> 

Dann in Ihrem js verwenden diese Klasse:

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

Hoffe, das hilft.

Answer 2

Versuchen Sie folgendes:

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

Er ist ein funktionierendes Beispiel, was Sie wollten. Ich erzeuge das benötigte nur mit js.

paar Punkte zu erwähnen

1. Sie den Ereignis-Listener auf das übergeordnete des dynamischen Inhalt erzeugt hinzuzufügen. Verwendung von IDs
2. vermeiden, wenn sie nicht zu gehen eindeutig sein und bevorzugt Klassen und Pseudo-Selektoren erforderlich, wenn

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>