在Ajax调用上重复数据

Question

我正在构建一个页面，希望能够使用Ajax动态更改帐户名称。一切都在名称更改提交上顺利进行，但是，在第二个，我得到重复的数据，即使该函数是相对于$（this）。这是我的控制台的一个例子。它最终会以某种方式覆盖第一次提交，并为当前帐户和之前的帐户发送第二个输入的名称。

的index.html

<a id="edit-name" number-data="+155512345678" phone-sid="example"></a>

$(document).on("click", "#edit-name", function(){
 var num = $(this).attr("number-data");
 var sid = $(this).attr("phone-sid");

 $(this).parent().parent().append('<div class="input-wrapper"><div class="input-field"><label for="name-change">Name</label><input id="name-change" type="text" class=""></div><a id="send-name" class="btn">send</a></div>');


    $(document).on("click", "#send-name", function(){
    var val = $(this).prev().children("#name-change").val();

     $.ajax({
      type: "POST",
      url: 'manage-account.php',
      data: {trackingNumber: num, newName: val, phoneSID: sid},
      success: function(data){
        console.log(data);
    }
  });
 });
});

管理-account.php

$trackingNumber = mysqli_real_escape_string($link, $_POST['trackingNumber']);
$newName = mysqli_real_escape_string($link, $_POST['newName']);

echo "Tracking Number: ". $trackingNumber;
echo "Phone Name: ". $newName;

Answer 1

分别绑定两个事件，使用数据属性

var cnt = 0;
$(document).on("click", ".edit-name", function() {
  var anc = $(this);
  num = anc.data("number"),
    sid = anc.data("sid"),
    html = '<div class="input-wrapper">\
    <div class="input-field">\
    <label for="name-change' + cnt + '">Name</label>\
    <input id="name-change' + cnt + '" type="text" data-number="' + num + '" data-sid="' + sid + '">\
    </div>\
    <a class="send-name btn">send</a>\
    </div>';

  anc.closest(".out").append(html);

});

$(document).on("click", ".send-name", function() {
  var inp = $(this).prev().find("input");
  console.log(inp.val(), inp.data("number"), inp.data("sid"));
});

.btn { border: 1px solid black; pointer: cursor; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="out">
  <div>
    <a class="edit-name" data-number="+155512345678" data-sid="example">xxx</a>
  </div>
  <div>
    <a class="edit-name" data-number="+3123213" data-sid="eeee">xxx</a>
  </div>
  <div>
    <a class="edit-name" data-number="+123123" data-sid="dddd">xxx</a>
  </div>
</div>

并使用数据属性。