Question

我正在使用jquery动态添加表单元素，js代码如下： -

$(document).on('ready page:change page:load', function(){
  var i = 1;
  $("#add_lp_button").on('click', function(){
    var elem = "<div class='row'><div class='col-md-6'><input type='text' name='language_pack[mappings[" + i + "][key]]' class='form-control' placeholder='Key' /></div><div class='col-md-6'><input type='text' name='language_pack[mappings[" + i + "][value]]' class='form-control' placeholder='Value' /></div></div>";
    $('#key_val').append(elem);
    i = i + 1;
  });
});

和html.erb代码如下： -

<%= form_for(@language_pack) do |f| %>
  <%= error_messages(@language_pack) %>

  <div class="form-group">
    <%= f.label 'language name and code', class: 'control-label required' %>
    <%= f.select(:lang_name, country_locale.to_a.collect { |v| ["#{v[0].capitalize} (#{v[1]})", v[0].capitalize] }, { prompt: 'Select' }, { class: 'form-control' }) %>
  </div>

  <div class="form-group">
    <%= f.label :mappings, class: "control-label" %>
    <div id='key_val'>
      <div class="row">
        <div class="col-md-6">
          <%= text_field_tag "language_pack[mappings[0][key]]", nil, class: "form-control", placeholder: "Key" %>
        </div>
        <div class="col-md-6">
          <%= text_field_tag "language_pack[mappings[0][value]]", nil, class: "form-control", placeholder: "Value" %><a href='javascript:void(0);' id='add_lp_button' class='btn btn-raised btn-primary pull-right'>Add</a>
        </div>
      </div>
    </div>
  </div>

  <div class="actions">
    <%= f.submit "Save", class: "btn btn-raised btn-primary pull-right" %>
  </div>
<% end %>

现在，问题在于，当我点击“ADD”按钮然后js执行两次意味着2 * 2 = 4，表格元素被追加。有什么问题。三江源。

javascript运行两次

0 个答案: