綁定事件在 Jquery 文件上傳中觸發兩次

Question

我編寫了此代碼，它將讀取 CSV 文件並將項目添加到 SharePoint 列表。 它正在工作，但它兩次添加相同的項目。 它從上到下添加，然后再次添加整個項目。

它正確讀取項目並正確添加。 但我無法弄清楚為什么代碼會運行兩次。

 $(function() { $("#upload").bind("click", function() { var regex = /^([a-zA-Z0-9\\s_\\\\.\\-:])+(.csv|.txt)$/; if (regex.test($("#fileUpload").val().toLowerCase())) { if (typeof(FileReader) != "undefined") { var reader = new FileReader(); reader.onload = function(e) { var rows = e.target.result.split("\\n"); console.log(rows); for (var i = 1; i < rows.length; i++) { var cells = rows[i].split("|"); var item = { "__metadata": { "type": "SP.Data.TestCatalogListItem" }, "Title": cells[0], "CityTitle": cells[1], "FirstName": cells[3], "LastName": cells[4] } _createListItem(item); } } reader.readAsText($("#fileUpload")[0].files[0]); } else { alert("This browser does not support HTML5."); } } else { alert("Please upload a valid CSV file."); } }); }); function _createListItem(listItems, success, failure) { $.ajax({ url: "https://mysite/_api/web/Lists/getbytitle('TestCatalog')/items", type: "POST", contentType: "application/json;odata=verbose", data: JSON.stringify(listItems), headers: { "Accept": "application/json;odata=verbose", "X-RequestDigest": $("#__REQUESTDIGEST").val() }, success: function(data) { //success(data); }, error: function(data) { //failure(data); } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <input type="file" id="fileUpload" /> <input type="button" id="upload" value="Upload" /> </body>

非常感謝任何幫助。

Answer 1

經過一番研究，我找到了答案。
所以這就是我最終要做的。

代替

$("#upload").bind("click", function () {

和

$("#upload").unbind("click").click(function (){

現在一切正常:)

Answer 2

可能是您的綁定事件腳本運行了兩次，所以最終添加了兩次點擊事件。 您可以通過唯一的字符串命名事件，這樣它就不會兩次綁定事件。

$("#upload").bind("click.uniqueName", function() {
    // your code here
})

Answer 3

問題出在您的 ajax 調用中，在您的 ajax 調用中添加async: false 。 這是因為您的 for 循環將在完成 ajax 請求之前執行。 所以最好添加這個東西。 否則你可以使用 jQuery 延遲。 你的代碼工作正常。 並且您的活動僅附加一次。

function _createListItem(listItems, success, failure) {
  $.ajax({
    url: "https://mysite/_api/web/Lists/getbytitle('TestCatalog')/items",
    type: "POST",
    async:false,
    contentType: "application/json;odata=verbose",
    data: JSON.stringify(listItems),
    headers: {
      "Accept": "application/json;odata=verbose",
      "X-RequestDigest": $("#__REQUESTDIGEST").val()
    },
    success: function(data) {
      //success(data);
    },
    error: function(data) {
      //failure(data);
    }
  });
}

綁定事件在 Jquery 文件上傳中觸發兩次

問題描述

3 個解決方案

解決方案1
0 2020-03-19 02:31:06

解決方案2
0 2020-03-19 05:36:31

解決方案3
0 2020-03-20 17:45:30

綁定事件在 Jquery 文件上傳中觸發兩次

問題描述

3 個解決方案

解決方案1 0 2020-03-19 02:31:06

解決方案2 0 2020-03-19 05:36:31

解決方案3 0 2020-03-20 17:45:30

解決方案1
0 2020-03-19 02:31:06

解決方案2
0 2020-03-19 05:36:31

解決方案3
0 2020-03-20 17:45:30