javascript - jQuery 事件监听器多次触发

Question

我遇到了 jQuery 问题，当我重新打开模式几次时，模式中的任何事件监听器也会触发几次？我已经实现了一个显示问题的示例。

例如，如果您打开和关闭模态框 5 次，则事件将运行 5 次。

$(document).ready(function() {

  $(".testButton").click(function(event) {
    event.preventDefault(); // cancel default behavior

    $('.validation-list-modal').modal('show');

    var ruleID = $('#mongoid').val();

    $('.validation-list-modal').on('shown.bs.modal', function(e) {
      alert('test');
    })

    document.getElementById("uploadButtonEdit").addEventListener("click", function() {
      document.getElementById("csvListEdit").click();
    });

    $('form#csvUploadEdit').submit(function(event) {
      event.preventDefault();

      $('.selectedFileName').hide();
      var ruleID = $('#mongoid').val();
      var importCount = 0;
      var notImportedCount = 0;
      var formData = new FormData(this);
      formData.append('ruleID', ruleID);

      $.ajax({
          url: '/ajax/fileUpload.php',
          type: 'POST',
          dataType: 'JSON',
          data: formData,
          contentType: false, // The content type used when sending data to the server.
          cache: false, // To unable request pages to be cached
          processData: false, // To send DOMDocument or non processed data file it is set to false              
        })
        .done(function(data) {
          $.each(data, function(index, val) {
            if ($('.validValuesList ul li:contains(' + val + ')').length) {
              notImportedCount++;
            } else {
              importCount++;
              $('.validValuesList ul').append('<span class="deleteValidEdit" title="Delete Autofix">X</span><li class="validTag">' + val + '</li>');
            }
          });
          if (importCount == 0) {
            $('.alert-modal').modal('show');
            $('.alert-modal .modal-dialog').removeClass('modal-wide');
            $('.alert-modal .modal-dialog').removeClass('modal-lg');
            $('.alertMessage').text("");
            $('.additionalAlertMessage').text("");
            $('.alertMessage').text(notImportedCount + ' duplicates were not imported');
          } else if (notImportedCount == 0) {
            $('.alert-modal').modal('show');
            $('.alert-modal .modal-dialog').removeClass('modal-wide');
            $('.alert-modal .modal-dialog').removeClass('modal-lg');
            $('.alertMessage').text("");
            $('.additionalAlertMessage').text("");
            $('.alertMessage').text(importCount + ' new values succesfully imported');
          } else {
            $('.alert-modal').modal('show');
            $('.alert-modal .modal-dialog').removeClass('modal-wide');
            $('.alert-modal .modal-dialog').removeClass('modal-lg');
            $('.alertMessage').text("");
            $('.additionalAlertMessage').text("");
            $('.alertMessage').text(importCount + ' new values succesfully imported');
            $('.additionalAlertMessage').text(notImportedCount + ' duplicates were not imported');
          }
        })
        .fail(function(data) {
          $('.alert-modal').modal('show');
          $('.alert-modal .modal-dialog').removeClass('modal-wide');
          $('.alert-modal .modal-dialog').removeClass('modal-lg');
          $('.alertMessage').text("");
          $('.additionalAlertMessage').text("");
          $('.alertMessage').text("You have selected an incorrect file type. Please select a CSV.")
        })
    });
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />



<!-- Modal where you will be able to add new rule -->
<div class="modal fade validation-list-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

  <div class="modal-dialog modal-wide">

    <div class="modal-content">

      <div class="modal-header modal-header-custom">
        <input class="ruleID" type="hidden"></input>
        <button type="button" class="close destroyTable clearValidModals" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Validation List</h4>
      </div>

      <div class="modal-body">
        <div class="autofixesSection">
          <div style="float: left; width: 190px; ">
            <form method="post" action="fileUpload.php" enctype="multipart/form-data" id="csvUploadEdit">
              <input type="file" name="csvList" id="csvListEdit">

            </form>
          </div>
          <div style="float: left; width: 76% !important; max-width: 76%; max-height: 50%; margin-left: 65px;">
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default clearValidModals" data-dismiss="modal">Close</button>
      </div>

    </div>

  </div>

</div>



<button class="testButton btn btn-primary">open modal</button>

Answer 1

$(document).ready(function() {
    $('.validation-list-modal').on('shown.bs.modal', function(e) {
      alert('test');
    })
  $('#upload').click(function(event) {
      alert('upload');
      event.preventDefault();

      $('.selectedFileName').hide();
      var ruleID = $('#mongoid').val();
      var importCount = 0;
      var notImportedCount = 0;
      var formData = new FormData(this);
      formData.append('ruleID', ruleID);

      $.ajax({
          url: '/ajax/fileUpload.php',
          type: 'POST',
          dataType: 'JSON',
          data: formData,
          contentType: false, // The content type used when sending data to the server.
          cache: false, // To unable request pages to be cached
          processData: false, // To send DOMDocument or non processed data file it is set to false              
        })
        .done(function(data) {
          $.each(data, function(index, val) {
            if ($('.validValuesList ul li:contains(' + val + ')').length) {
              notImportedCount++;
            } else {
              importCount++;
              $('.validValuesList ul').append('<span class="deleteValidEdit" title="Delete Autofix">X</span><li class="validTag">' + val + '</li>');
            }
          });
          if (importCount == 0) {
            $('.alert-modal').modal('show');
            $('.alert-modal .modal-dialog').removeClass('modal-wide');
            $('.alert-modal .modal-dialog').removeClass('modal-lg');
            $('.alertMessage').text("");
            $('.additionalAlertMessage').text("");
            $('.alertMessage').text(notImportedCount + ' duplicates were not imported');
          } else if (notImportedCount == 0) {
            $('.alert-modal').modal('show');
            $('.alert-modal .modal-dialog').removeClass('modal-wide');
            $('.alert-modal .modal-dialog').removeClass('modal-lg');
            $('.alertMessage').text("");
            $('.additionalAlertMessage').text("");
            $('.alertMessage').text(importCount + ' new values succesfully imported');
          } else {
            $('.alert-modal').modal('show');
            $('.alert-modal .modal-dialog').removeClass('modal-wide');
            $('.alert-modal .modal-dialog').removeClass('modal-lg');
            $('.alertMessage').text("");
            $('.additionalAlertMessage').text("");
            $('.alertMessage').text(importCount + ' new values succesfully imported');
            $('.additionalAlertMessage').text(notImportedCount + ' duplicates were not imported');
          }
        })
        .fail(function(data) {
          $('.alert-modal').modal('show');
          $('.alert-modal .modal-dialog').removeClass('modal-wide');
          $('.alert-modal .modal-dialog').removeClass('modal-lg');
          $('.alertMessage').text("");
          $('.additionalAlertMessage').text("");
          $('.alertMessage').text("You have selected an incorrect file type. Please select a CSV.")
        })
  });
  $(".testButton").click(function(event) {
    event.preventDefault(); // cancel default behavior

    $('.validation-list-modal').modal('show');

    var ruleID = $('#mongoid').val();

    //document.getElementById("uploadButtonEdit").addEventListener("click", function() {
      //document.getElementById("csvListEdit").click();
    //});


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />



<!-- Modal where you will be able to add new rule -->
<div class="modal fade validation-list-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

  <div class="modal-dialog modal-wide">

    <div class="modal-content">

      <div class="modal-header modal-header-custom">
        <input class="ruleID" type="hidden"></input>
        <button type="button" class="close destroyTable clearValidModals" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Validation List</h4>
      </div>

      <div class="modal-body">
        <div class="autofixesSection">
          <div style="float: left; width: 190px; ">
            <form method="post" action="fileUpload.php" enctype="multipart/form-data" id="csvUploadEdit">
              <input type="file" name="csvList" id="csvListEdit">

            </form>
          </div>
          <div style="float: left; width: 76% !important; max-width: 76%; max-height: 50%; margin-left: 65px;">
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-primary clearValidModals" id="upload">Upload</button> 
        <button type="button" class="btn btn-default clearValidModals" data-dismiss="modal">Close</button>
      </div>

    </div>

  </div>

</div>



<button class="testButton btn btn-primary">open modal</button>

您必须将'shown.bs.modal'事件放在click事件处理程序之外

更新

您的代码中存在问题。

1. HTML 中不存在 uploadButtonEdit 的 ID
2. 我不知道你为什么使用提交事件处理程序。我想你想在点击提交按钮时ajax请求。但在 HTML 中，不存在提交按钮。

因此，我创建了上传按钮和点击事件监听器。您可以在点击事件监听器中ajax请求