Question

我有这个Rails应用程序，它通过jQuery将字段插入到表单中。如果页面上有一个表单，但是当有两个表单时，脚本不会将字段插入正确的表单中。如何获取表单ID并将字段插入相应的表单？

$(function() {
  $('form').on('click', '.remove_fields', function(event) {
    $(this).prev('input[type=hidden]').val('1');
    $(this).closest('fieldset').hide();
    return event.preventDefault();
  });
  return $('form').on('click', '.add_fields', function(event) {
    var regexp, time;
    time = new Date().getTime();
    regexp = new RegExp($(this).data('id'), 'g');
    $(this).before($(this).data('fields').replace(regexp, time));
    return event.preventDefault();
  });
});

供参考;这里是触发插入字段的链接：

<a class="add_fields" data-id="70151989617000" data-fields="<fieldset class=&quot;marginBottom20&quot;>  <div class=&quot;row col-lg-8 padAll20 ghostBG locationDetails form&quot;>    <div class=&quot;col-lg-3 colMarginRight&quot;>      <label>First Name <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;First Name&quot; type=&quot;text&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][first_name]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_first_name&quot; />    </div>    <div class=&quot;col-lg-3 colMarginRight&quot;>      <label>Last Night <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;Last Name&quot; type=&quot;text&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][last_name]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_last_name&quot; />    </div>    <div class=&quot;col-lg-3 colMarginRight&quot;>      <label>Title <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;Current Title&quot; type=&quot;text&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][title]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_title&quot; />    </div>    <div class=&quot;col-lg-3&quot;>      <label>Company <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;Current Company&quot; type=&quot;text&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][company]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_company&quot; />    </div>    <div class=&quot;col-lg-12 padTop10&quot;>      <label>Profile Image <em>*</em></label>      <div class=&quot;imageUpload&quot;>        <input placeholder=&quot;Image&quot; class=&quot;wide&quot; type=&quot;file&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][image]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_image&quot; />      </div>    </div>  </div></fieldset>" href="#">Add Another Instructor</a>

First Form HTML

<form class="edit_course" id="edit_course_7" enctype="multipart/form-data" action="/admin/courses/become-a-web-developer" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓">
  <div class="marginTop40">
    <a class="add_fields" data-id="70152053053520" data-fields="<fieldset class=&quot;marginBottom20&quot;>  <div class=&quot;row col-lg-12 padAll20 ghostBG locationDetails form&quot;>    <div class=&quot;col-lg-3 colMarginRight&quot;>      <label>Name <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;Name of Location&quot; type=&quot;text&quot; name=&quot;course[courselocations_attributes][70152053053520][name]&quot; id=&quot;course_courselocations_attributes_70152053053520_name&quot; />    </div>    <div class=&quot;col-lg-3 colMarginRight&quot;>      <label>Address <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;Address&quot; type=&quot;text&quot; name=&quot;course[courselocations_attributes][70152053053520][address]&quot; id=&quot;course_courselocations_attributes_70152053053520_address&quot; />    </div>    <div class=&quot;col-lg-2 colMarginRight&quot;>      <label>City <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;City&quot; type=&quot;text&quot; name=&quot;course[courselocations_attributes][70152053053520][city]&quot; id=&quot;course_courselocations_attributes_70152053053520_city&quot; />    </div>    <div class=&quot;col-lg-1 colMarginRight&quot;>      <label>State <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;XX&quot; pattern=&quot;[A-Za-z]{2}&quot; type=&quot;text&quot; name=&quot;course[courselocations_attributes][70152053053520][state]&quot; id=&quot;course_courselocations_attributes_70152053053520_state&quot; />    </div>    <div class=&quot;col-lg-2&quot;>      <label>Zipcode <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;12345&quot; type=&quot;text&quot; name=&quot;course[courselocations_attributes][70152053053520][zipcode]&quot; id=&quot;course_courselocations_attributes_70152053053520_zipcode&quot; />    </div>    <div class=&quot;col-lg-12 padTop10&quot;>      <input type=&quot;hidden&quot; value=&quot;false&quot; name=&quot;course[courselocations_attributes][70152053053520][_destroy]&quot; id=&quot;course_courselocations_attributes_70152053053520__destroy&quot; /><a class=&quot;remove_fields&quot; href=&quot;#&quot;>Remove</a>    </div>  </div></fieldset>" href="#">Add a new location</a>
  </div>
</form>

第二表格HTML

<form class="edit_courselocation" id="edit_courselocation_55" enctype="multipart/form-data" action="/admin/courselocations/austin-wework-austin-tx" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">     
  <div class="marginTop20 marginBottom40">
    <a class="add_fields" data-id="70151989617000" data-fields="<fieldset class=&quot;marginBottom20&quot;>  <div class=&quot;row col-lg-8 padAll20 ghostBG locationDetails form&quot;>    <div class=&quot;col-lg-3 colMarginRight&quot;>      <label>First Name <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;First Name&quot; type=&quot;text&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][first_name]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_first_name&quot; />    </div>    <div class=&quot;col-lg-3 colMarginRight&quot;>      <label>Last Night <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;Last Name&quot; type=&quot;text&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][last_name]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_last_name&quot; />    </div>    <div class=&quot;col-lg-3 colMarginRight&quot;>      <label>Title <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;Current Title&quot; type=&quot;text&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][title]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_title&quot; />    </div>    <div class=&quot;col-lg-3&quot;>      <label>Company <em>*</em></label>      <input class=&quot;wide&quot; placeholder=&quot;Current Company&quot; type=&quot;text&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][company]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_company&quot; />    </div>    <div class=&quot;col-lg-12 padTop10&quot;>      <label>Profile Image <em>*</em></label>      <div class=&quot;imageUpload&quot;>        <input placeholder=&quot;Image&quot; class=&quot;wide&quot; type=&quot;file&quot; name=&quot;courselocation[courseinstructors_attributes][70151989617000][image]&quot; id=&quot;courselocation_courseinstructors_attributes_70151989617000_image&quot; />      </div>    </div>  </div></fieldset>" href="#">Add Another Instructor</a>
  </div>
</form>

Answer 1

在玩了一下之后，我意识到在Rails中发出AJAX请求时，JS没有重新加载。使用以下内容更新JS：

function initialise(){
  $(function() {
    $('form').on('click', '.remove_fields', function(event) {
      $(this).prev('input[type=hidden]').val('1');
      $(this).closest('fieldset').hide();
      return event.preventDefault();
    });
    return $('form').on('click', '.add_fields', function(event) {
      var linkID = $(this).attr("data-id")
      alert(linkID)
      var regexp, time;
      time = new Date().getTime();
      regexp = new RegExp($(this).data('id'), 'g');
      $(this).before($(this).data('fields').replace(regexp, time));
      return event.preventDefault();
    });
  });
};
$(document).ready(function(){
    initialise();
});

然后在AJAX请求上调用以下内容来加载第二个表单解决了它：

$(document).ajaxComplete(function () {
    initialise();
});

jQuery - 如何获取父表单ID（当多个表单时）并将字段插入正确的表单

1 个答案: