Jquery冒泡onclick导致重复

Question

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

我不是每个按钮只有一个插入，每个按钮只需点击一个按钮即可触发点击事件，我只需要每次点击一次插入。经过长时间坚持之后，我开始相信这个问题正在冒泡，但是我尝试了所有的解决方案，每次插入都会加倍

小提琴：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")); ...

它会在div之后插入reseller-row的新副本

$(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>