Jquery冒泡onclick导致重复

Question

您在下面看到的div reseller-row我想在用户点击add-reseller-btn时根据需要克隆多次，在我的情况下，我主要使用jquery，这个div是一个更大表单的一部分，允许用户添加到她的书的销售地的链接。问题是，它在点击时为每个新的div创建了一个按钮（我想要），但如果我只点击了15个按钮中的1个。

我不只是每个按钮插入一个，每个按钮只需点击一个按钮就会触发一个点击事件，我只想每次点击插入一个。在坚持了很长时间之后，我相信问题正在冒泡，但在我尝试的所有解决方案中，每次的插入都会翻倍

Fiddle：http://jsfiddle.net/w7oz3vg8/4/-由于某种原因，在之前的计算机上进行了注释

HTML

<div class = "reseller-row">
    <label for = "reseller_name">Add a retailer</label>
    <input type = "text" name = "reseller_name" class = "reseller-name"></input>
    <!-- Span if user enters invalid retailer name -->
    <span></span>
    <!-- Or select retailers already in database -->
    <label for = "reseller_select">Existing retailers</label>
    <select name = "reseller_select" class = "reseller-select">
        <option name = "reseller" value = "None">None</option>
        <!-- Fill select with resellers -->
        <!-- If select has been submitted and its value equals what came back(saved) from post -->
        <option name = "reseller" value = "3">Amazon</option>
        <!-- If select has been submitted and its value equals what came back(saved) from post -->
        <option name = "reseller" value = "4">whitcolls</option>
        <!-- If select has been submitted and its value equals what came back(saved) from post -->
        <option name = "reseller" value = "5">Yahoo</option>
    </select>
    <span></span>
    <!-- Url of retailer -->
    <label for = "reseller_url">Url</label>
    <input type = "text" name = "reseller_url" class= "reseller-url" value = ""></input>
    <span></span>
    <!-- Status of book's availability -->
    <div>
        <label for = "availability">Availability status</label>
        <select name = "availability" class = "availability">
            <option value="Available">Available</option>
            <option value="Not available yet">Not available yet</option>
        </select>
        <span></span>
        <span></span>
    </div>
    <div>
        <button class = "add-reseller-btn" type = "button">Add Reseller</button>
    </div>
</div>

Javascript

// Form allows user to add resellers to book
// When document is ready
$(document).ready(function() {
    // Get existing fields/only need to be checked, not duplicated
    // Field allowing user to enter new reseller name
    var reseller_name_field = $("<input></input>")
        .addClass("reseller-name")
        .attr("type", "text"); 
    // Select allowing user to choose pre existing resellers
    var reseller_select     = $("<select></select>")
        .addClass("reseller-select"); 
    // Field allowing user to add urls for resellers
    var reseller_url_field  = $("<input></input>") 
        .addClass("reseller-url-field")
        .attr("type", "text"); 
    // Select allowing user to choose wheither book is currently available
    var availability_select = $("<select></select>")
        .addClass("availability"); 
    /*// Button to add more resellers will only get added if javascript is working
    var add_reseller_btn    = $("<button>Add Reseller</button>")
        .addClass("add-reseller-btn")
        .attr("type", "button");*/
    // Event delegation, instructions get passed to children of container
    var div = $(document.getElementsByClassName("reseller-row"))
        // Add-reseller-btn within reseller-row container
        .on("click", ".add-reseller-btn", function(e) {
            create_row();
        });
    // Array of dom elements
    //var elems = [ reseller_name_field, reseller_select, reseller_url_field, availability_select, add_reseller_btn ];
    // Function append new row
    function create_row() {

        // True - clone data and events attached
        $(div).clone(true).insertAfter( $(".reseller-row") );
        // $(elems).appendTo(div);
    }
});

Answer 1

这是因为$(div).clone(true).insertAfter( $(".reseller-row"));。。。

它在每个reseller-row之后插入一个新的div副本，因此

$(div).clone(true).insertAfter( $(".reseller-row").last() );

---

// Form allows user to add resellers to book
// When document is ready
$(document).ready(function() {
  // Field allowing user to enter new reseller name
  var reseller_name_field = $("<input></input>")
    .addClass("reseller-name")
    .attr("type", "text");
  // Select allowing user to choose pre existing resellers
  var reseller_select = $("<select></select>")
    .addClass("reseller-select");
  // Field allowing user to add urls for resellers
  var reseller_url_field = $("<input></input>")
    .addClass("reseller-url-field")
    .attr("type", "text");
  // Select allowing user to choose wheither book is currently available
  var availability_select = $("<select></select>")
    .addClass("availability");
  /*// Button to add more resellers will only get added if javascript is working
	var add_reseller_btn    = $("<button>Add Reseller</button>")
		.addClass("add-reseller-btn")
		.attr("type", "button");*/
  // Event delegation, instructions get passed to children of container
  var div = $('.reseller-row')
    // Add-reseller-btn within reseller-row container
    .on("click", ".add-reseller-btn", function(e) {
      console.log(e.target, e)
      create_row();
    });
  // Array of dom elements
  //var elems = [ reseller_name_field, reseller_select, reseller_url_field, availability_select, add_reseller_btn ];
  // Function append new row
  function create_row() {
    // True - cloen data and events attached
    $(div).clone(true).insertAfter($(".reseller-row").last());
    // $(elems).appendTo(div);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="reseller-row">
  <label for="reseller_name">Add a retailer</label>
  <input type="text" name="reseller_name" class="reseller-name" />
  <!-- Span if user enters invalid retailer name -->
  <span></span>
  <!-- Or select retailers already in database -->
  <label for="reseller_select">Existing retailers</label>
  <select name="reseller_select" class="reseller-select">
    <option name="reseller" value="None">None</option>
    <!-- Fill select with resellers -->
    <!-- If select has been submitted and its value equals what came back(saved) from post -->
    <option name="reseller" value="3">Amazon</option>
    <!-- If select has been submitted and its value equals what came back(saved) from post -->
    <option name="reseller" value="4">whitcolls</option>
    <!-- If select has been submitted and its value equals what came back(saved) from post -->
    <option name="reseller" value="5">Yahoo</option>
  </select>
  <span></span>
  <!-- Url of retailer -->
  <label for="reseller_url">Url</label>
  <input type="text" name="reseller_url" class="reseller-url" value="" />
  <span></span>
  <!-- Status of book's availability -->
  <div>
    <label for="availability">Availability status</label>
    <select name="availability" class="availability">
      <option value="Available">Available</option>
      <option value="Not available yet">Not available yet</option>
    </select>
    <span></span>
    <span></span>
  </div>
  <div>
    <button class="add-reseller-btn" type="button">Add Reseller</button>
  </div>
</div>