jQuery - 親フォームID（複数フォームの場合）を取得し、フィールドを正しいフォームに挿入する方法

Question

フィールドにjQuery経由でフォームを挿入するRailsアプリケーションがあります。これは、ページに1つのフォームがある場合に効果的ですが、2つのフォームがある場合、スクリプトはフィールドを正しいフォームに挿入しません。フォーム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> 

まずフォームの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(); 
});