绑定事件在 Jquery File Upload 中触发两次答案

【问题标题】：Bind events firing twice in Jquery File Upload绑定事件在 Jquery File Upload 中触发两次
【发布时间】：2020-06-30 03:50:05
【问题描述】：

我编写了这段代码，它将读取 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>

非常感谢任何帮助。

【问题讨论】：

标签： jquery sharepoint sharepoint-2013 sharepoint-online sharepoint-designer

【解决方案1】：

经过一番研究，我找到了答案。
所以这就是我最终要做的。

替换

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

与

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

现在一切正常 :)

【讨论】：

知道问题出在哪里以及为什么有帮助吗？

【解决方案2】：

可能是您的绑定事件脚本运行了两次，所以最终添加了两次点击事件。您可以通过唯一的字符串命名事件，这样它就不会绑定事件两次。

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

【讨论】：

【解决方案3】：

问题出在您的 ajax 调用中，在您的 ajax 调用中添加 async: false。这是因为您的 for 循环将在完成您的 ajax 请求之前执行。所以最好添加这个东西。否则你可以使用 jQuery deferred。你的代码工作正常。并且您的活动仅附加一次。

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);
    }
  });
}

【讨论】：