单选按钮在 jquery innerhtml 中不起作用

Posted 2023-05-07

【中文标题】单选按钮在 jquery innerhtml 中不起作用

【英文标题】：radio button is not working in jquery innerhtml

【发布时间】：2013-10-04 13:01:10

【问题描述】：

我想在 div(students_in_course) 中的表 data() 中添加单选按钮，但在 jquery innerhtml 中未显示单选按钮。如果我使用类型按钮或文本，它将起作用。

$(document).ready(function() 

$("button[name='create_new_take_attendance_button']").click(function(e)
    e.preventDefault();
    var semester_log_id = $(this).attr('id');
   //alert(semester_log_id);

   $.ajax(
    url: "attendance/view_students_in_semester_log/"+semester_log_id,
    type: "post",
    dataType: "json",
    success: function(data)
    
              var totalString ='';
              for(var x=0;x<data.length;x++)
              
              totalString+='<tr><td>'+data[x].roll_number+'</td><td>'+data[x].full_name+'</td><td><form><input type="radio" name='+x+' value="yes"/>yes<input type="radio" name='+x+' value="no"/>no </form></td></tr>'; // error radio button is not showing
              
              $('#students_in_course').html(totalString);
              $('#modal_take_attendance').modal('show');
              
        );
    );  
  );

【问题讨论】：

可以添加 HTML 吗？

尝试在名称中添加引号，name="'+x+'"

学生卷	学生姓名	现在

【参考方案1】：

您的代码似乎没问题。

这是我在 JSFiddle 中尝试过的示例。请参考这里。

https://jsfiddle.net/jijith1309/ne4obL7q/

HTML

<table>
  <thead>
    <tr>
      <th>Student Roll</th>
      <th>Student Name</th>
      <th>Present</th>
    </tr>
  </thead>
  <tbody id="students_in_course"> </tbody>
</table>

脚本

$(document).ready(function() 
  var str = '';
  for (var i = 0; i < 3; i++) 
    str += '<tr><td>123</td><td>jijith</td><td><form><input type="radio" name=' + i + ' value="yes"/>yes<input type="radio" name=' + i + ' value="no"/>no </form></td></tr>'
  
  $('#students_in_course').html(str);
);