在Ajax調用上重複數據

我有一個我正在構建的頁面，我希望能夠使用Ajax動態更改帳戶名稱。一切工作順利進行名稱更改提交，但是，第二個，我得到重複的數據，即使該函數是相對於$（this）。這是我的控制檯的一個例子。它最終以某種方式覆蓋第一次提交，併爲當前帳戶和先前帳戶發送第二個輸入名稱。在Ajax調用上重複數據

的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;

來源

2016-09-29 codnor

在點擊事件中綁定點擊事件。每次點擊外部添加一個新的點擊事件，所以他們加倍。拉第二次點擊第一個... – epascarello

我可以通過點擊功能作爲參數傳遞num和sid嗎？ – codnor

其他問題是您分配具有相同ID的多個元素。所以如果你使用了一個唯一的ID，你就不會有這個問題。 – epascarello

綁定兩個事件分開，使用數據屬性

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>

和使用數據的屬性。

來源

2016-09-29 20:30:07 epascarello

在Ajax調用上重複數據

回答

相關問題