获取jquery中div的特定input（child）元素的ID或类名

Question

我使用波纹管代码动态创建表。 在此表中，第4个td具有div的动态数据，我想要的是当用户选择文本框想要删除子div然后附加文本框，或者如果他选择fileupload然后附加该td标签中的上传字段

//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);

我正在尝试使用此脚本

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

通过这个我得到了特定领域的ID或类名。

问题，但对于第4天的每一行，第一次单击都不会发出警报。

Answer 1

您可以通过使用jquery .on("click")事件获取上传输入的ID，如下所示。

 $("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() { 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);
});