Select input data attribute not passing in jQuery appendTo form input-CodePudding

If the form is selected in the initial state, the data is passed. But the cloning form doesn't pass data from the select to the next form. If I duplicate the form at the beginning it also passes the data. But I want the cloned form to pass the data.

$('input#clone').click(function() {
  $("div#old").clone().attr('id', 'new_form').appendTo("body")
})

$(".product").change(function() {
  newPrice = $(this).children(':selected').data('price');
  $(this).parent().next('.pricebox').find('.price').val(newPrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Clone" id="clone" />
<hr>
<div id="old">
  <div >
    <select  name="product[]">
      <option value="1" data-price="1.99">1</option>
      <option value="2" data-price="2.99">2</option>
      <option value="3" data-price="3.99">3</option>
      <option value="4" data-price="4.99">4</option>
    </select>
  </div>
  <div >
    <input type="text" name="price[]"  value="00" />
  </div>
</div>

CodePudding user response：

You can use on() to get change on created element then use each() to do a loop on all element.

NOTE: ID must be unique, you need to change it to class if you want more than one element.

$('input#clone').click(function() {
  $("div.old").clone().attr('id', 'new_form').appendTo("body")
})

$(document).on('change', '.product', function(event) {
  newPrice = $(this).children(':selected').data('price');
  $(this).parent().next('.pricebox').find('.price').val(newPrice);
  $('.product').each(function() {
    //console.log($(this).val());
    console.log($(this).parent('div:first').nextAll('.pricebox').find('.price').val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Clone" id="clone" />
<hr>
<div >
  <div >
    <select  name="product[]">
      <option value="1" data-price="1.99">1</option>
      <option value="2" data-price="2.99">2</option>
      <option value="3" data-price="3.99">3</option>
      <option value="4" data-price="4.99">4</option>
    </select>
  </div>
  <div >
    <input type="text" name="price[]"  value="00" />
  </div>
</div>

CodePudding user response：

Consider the following.

$(function() {
  $('input#clone').click(function(e) {);
    var newForm = $("div#old").clone();
    newForm.attr('id', 'new_form_'   ($("[id^='new_form']").length   1)).appendTo(".forms");
    $("select", newForm).val($("#old select").val());
  });

  $(".forms").on("change", ".product", function(e) {
    newPrice = $("option:selected", this).data('price');
    $(this).parent().next('.pricebox').find('.price').val(newPrice);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Clone" id="clone" />
<hr>
<div >
  <div id="old">
    <div >
      <select  name="product[]">
        <option value="1" data-price="1.99">1</option>
        <option value="2" data-price="2.99">2</option>
        <option value="3" data-price="3.99">3</option>
        <option value="4" data-price="4.99">4</option>
      </select>
    </div>
    <div >
      <input type="text" name="price[]"  value="1.99" />
    </div>
  </div>
</div>

This properly clones the item and resets the Value.It also uses proper delegation to ensure all new dynamic elements get the same callback. This also ensures that all items have unique IDs.