jquery 在按名称属性获取值时出现问题

Question

<%= attendance_form_id %> 在 jquery 中包含在 html 视图中生成的表的动态唯一 id。
我试图通过名称属性project_director[status]获取单选按钮值。在每个唯一ID 中具有相同的属性名称。我正在使用警报来获取价值。

目前我的代码在第一页加载提交时正确地提醒表单提交的值。但第二次提交之后它会提醒第一次提交警报值。一旦我重新加载页面，它第一次就可以正常工作。

我怎样才能让警报始终正确工作。

js

<script>
   $(document).on('turbolinks:load', function() {
     $('#<%= attendance_form_id %>').on('ajax:success', function(event){
      const [data, status, xhr] = event.detail
      //alert(status)
      value = $('input[name="project_director[status]"]:checked').val();
      alert(value)
      $('#<%= attendance_form_id %>').hide()
     }).on('ajax:error',function(event){
        alert("Something went wrong, please reload page")
     });
   });
</script>

html代码

<table id="attendance_form_29">
   <tbody>
      <tr>
         <td>
            <ul>
               <div>
                  <div class="wrapper-class">
                     <input type="radio" value="true" name="project_director[status]" id="project_director_status_true">
                     <label for="project_director_approve">Approve</label>
                     <br>
                     <input type="radio" value="false" name="project_director[status]" id="project_director_status_false">
                     <label for="project_director_reject">Reject</label>
                  </div>
  
               </div>
            </ul>
         </td>
         <td>
            <input value="4" type="hidden" name="project_director[user_id]" id="project_director_user_id">
            <input type="submit" name="commit" value="Submit" class="button primary small" data-disable-with="Submit">
         </td>
      </tr>
   </tbody>
</table>

Answer 1

如果我理解正确，您需要在具有<%= attendance_form_id %> id 的表单中获取input[name="project_director[status]"] 的值。在这种情况下，$('input[name="project_director[status]"]:checked').val() 将无法按预期工作，因为您有多个使用上述名称的输入（在每个唯一 id 中具有相同的属性名称）。要使其工作，您可以使用.find()：

$(document).on('turbolinks:load', function() {
 $('#<%= attendance_form_id %>').on('ajax:success', function(event){
  const [data, status, xhr] = event.detail;
  //change here
  value = $('#<%= attendance_form_id %>').find('input[name="project_director[status]"]:checked').val(); 
  alert(value)
  $('#<%= attendance_form_id %>').hide()
 }).on('ajax:error',function(event){
    alert("Something went wrong, please reload page")
 });
});