jquery内のdivの特定の入力（子）要素のIDまたはクラス名を取得します

Question

私は動的にテーブルを作成しました。 この表では4番目のTDは、私が何をしたいのdivを持つ動的なデータを持っていることは、ユーザーの選択テキストボックスは、彼がファイルアップロードを選択した場合、テキストボックスや を追加し、その後、子のdivを削除したいときだけ

//some lines of table opening and header code comes here 
$.each(data,function(key,value){ 
    MoreTag += '<tr><td style="width: 10px">'+value.Id+'</td>'; 
    MoreTag += '<td>'+value.installment_number+'</td>'; 
    MoreTag += '<td>'+value.instal_title+'</td>'; 

    //4th td element 
    MoreTag += '<td id="tabledata">'+   
       '<div id="fields'+value.installment_number+'">'+ 
        '<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox">&nbsp;Text Box</label>'+ 
        '&nbsp;<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload">&nbsp;File Upload</label>'+ 
       '</div></td>'; 
    MoreTag += '<td>'+value.instal_amount+'</td></tr>'; 
}); 
MoreTag += '</tbody>'; 
MoreTag += '</table>'; 
MoreTag += '</div>'; 
$('#listofstudloanschedules').append(MoreTag); 

そのTDタグにアップロードフィールドを追加 です

私はこのことで、このスクリプト

var childinput = ''; 
$(document).on('change',"#tabledata",function(){ 
    var name = $(this).children("div").prop("id"); 
    $("#" + name + " input").click(function(){ 
     childinput = $(this).attr("id"); 
     alert(childinput); 
    }); 
}); 

でトリング午前私はperticularフィールドIDまたはクラス名を得ました。

問題 しかし、すべての行の4番目のTDのために最初のクリックは、あなたは次のようにjqueryの.on("click")イベントを使用して、アップロード入力のIDを取得することができます。..

Answer 1

に警告されませんでした。

$("div#text_fields input").on('click',function(){ 
 
     var name=$(this).attr("id"); 
 
     console.log(name); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td id="tabledata"> 
 
     <div id="text_fields"> 
 
      <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox">Text Box</label> 
 
      <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload">Upload File</label> 
 
     </div> 
 
    </td>

Answer 2

私はあなたに簡単なコードスニペットを与えてみましょう、しかし、あなたはあなたの条件

$(document).ready(function() { 
 
    $('input[type=radio]').change(function() { 
 
\t \t if (this.value == 'textbox') { 
 
      alert("textbox"); 
 
     } 
 
     else if (this.value == 'uploadfile') { 
 
      alert("uploadfile"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<td id="tabledata"> 
 
     <div id="text_fields"> 
 
      <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox" value="textbox">Text Box</label> 
 
      <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload" value="uploadfile">Upload File</label> 
 
     </div> 
 
    </td>

Answer 3

これをごとに入力タイプのラジオボタンの値を変更する必要があり私の要件に応じて適切な解決策です。

$(document).on('change',"#tabledata",function(){ 
    var childinput=$(this).find("div input:checked").prop("id"); 
    alert(childinput); 
});