jquery - .insertBefore() is not a function javascript - Stack Overflow

admin管理员组

文章数量:1344519

So i have a page and upon click button, it opens up a nested field and i want to hide one of the div in the filed upon click but so far my function doesnt work.

my js file

$('body').on('click', '#main-applicant-btn', function() {

    event.stopPropagation();
    var prependData = $('.main-applicant').children().first().clone();
    prependData.find("div.checkbox").replaceWith( $( "div.checkbox.hide" ));
    var prependedData = $('.main-applicant').children().last();
    var list = document.getElementsByClassName("main-applicant");
    list.insertBefore(prependData, prependedData);
  })

my applicant.html.erb file

<div class="form-group">
        <%= f.link_to_add "", :applicant_mitments, :class => "glyphicon glyphicon-plus-sign pointer add", :id => "main-applicant-btn", :data => {:target => "#main-applicant-#{rand}"} %>
      </label>
    </div>
    <span id="main-applicant-<%= rand %>" class="main-applicant">
          <%= f.simple_fields_for :applicant_mitments do |applicant_mitment| %>
            <%= render "existing_mitment_fields", {:f => applicant_mitment, :instalment => true, :type => 'existing_mitment_applicant'} %>
          <% end %>
        </span>

my nested field existing_mitment_fields.html.erb

 <div class="form-group monthly-instalment-lender-checkbox">
      <div class="col-sm-3" id="checkbox-existing-fields">
          <div class="checkbox">
            <label>
              <span>Joint Name</span>
              <%= f.input_field :joint_name, as: :boolean, class: "joint-name-mitment" %>
            </label>
          </div>
        </div> 
    </div>

So upon click i want to the main-applicant-btn and when it displays the nested_fields, i will hide the div.checkbox but so far when i try this code, i get error .insertBefore() is not a function.

Anyone has any clues on how to append or force javascript to run code after it has loaded?

So i have a page and upon click button, it opens up a nested field and i want to hide one of the div in the filed upon click but so far my function doesnt work.

my js file

$('body').on('click', '#main-applicant-btn', function() {

    event.stopPropagation();
    var prependData = $('.main-applicant').children().first().clone();
    prependData.find("div.checkbox").replaceWith( $( "div.checkbox.hide" ));
    var prependedData = $('.main-applicant').children().last();
    var list = document.getElementsByClassName("main-applicant");
    list.insertBefore(prependData, prependedData);
  })

my applicant.html.erb file

<div class="form-group">
        <%= f.link_to_add "", :applicant_mitments, :class => "glyphicon glyphicon-plus-sign pointer add", :id => "main-applicant-btn", :data => {:target => "#main-applicant-#{rand}"} %>
      </label>
    </div>
    <span id="main-applicant-<%= rand %>" class="main-applicant">
          <%= f.simple_fields_for :applicant_mitments do |applicant_mitment| %>
            <%= render "existing_mitment_fields", {:f => applicant_mitment, :instalment => true, :type => 'existing_mitment_applicant'} %>
          <% end %>
        </span>

my nested field existing_mitment_fields.html.erb

 <div class="form-group monthly-instalment-lender-checkbox">
      <div class="col-sm-3" id="checkbox-existing-fields">
          <div class="checkbox">
            <label>
              <span>Joint Name</span>
              <%= f.input_field :joint_name, as: :boolean, class: "joint-name-mitment" %>
            </label>
          </div>
        </div> 
    </div>

So upon click i want to the main-applicant-btn and when it displays the nested_fields, i will hide the div.checkbox but so far when i try this code, i get error .insertBefore() is not a function.

Anyone has any clues on how to append or force javascript to run code after it has loaded?

• javascript
• jquery

Share Improve this question Follow edited Oct 1, 2015 at 2:59 Kingsley Simon asked Sep 30, 2015 at 23:40 Kingsley SimonKingsley Simon 2,21077 gold badges4444 silver badges8989 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

insertBefore is a Node method.
document.getElementsByClassName() method returns an HTMLCollection.

You've got to iterate through this HTMLCollection or to pick one of the elements inside it to actually touch the nodes and use their method :

list[0].insertBefore(...,...)

Also, as mentioned by @nnnnnn, "the insertBefore() method isn't expecting jQuery objects as arguments.".
So either you use plain javascript methods like document.querySelector('') or you call the target of the jQuery object ($(...)[0])

本文标签： jqueryinsertBefore() is not a function javascriptStack Overflow