警报在更新数据时逐渐弹出

Question

我有一个动态按钮来编辑对象的一些数据。现在，一旦数据更新成功，我就会向用户发出警报，说明它已成功完成。

但是，当用户第二次编辑同一个对象时，它会抛出两次相同的警告。同样，当第三次更新同一个对象时三次，依此类推。

我相信，我需要取消绑定动态按钮上的点击事件来解决这个问题，并确保每次编辑对象时只弹出一次警报。

另请注意，工具名称和工具url默认为选项字段，但如果填写工具名称和工具url中的任何一项，则成为必填字段。

如何取消绑定下面代码中“.edit-btn”按钮上的点击事件？

var myData = [{
  company: "ABC",
  url: "www.abc.com",
  type: "internal"
}, {
  company: "CDE",
  url: "www.cde.com",
  type: "internal"
}, {
  company: "DEF",
  url: "www.def.com",
  toolName: "reportTool",
  toolURL: "http://www.toolURL.com",
  type: "external"
}, {
  company: "EFG",
  url: "www.efg.com",
  type: "internal"
}, {
  company: "FGH",
  url: "www.fgh.com",
  type: "external"
}];

$('#createData').click(function() {
  createDisplay();
});

function createDisplay() {
  $('.container').empty();
  myData.forEach(function(obj) {
    $('.container').append(
      $('<div>').addClass('box').append(
        $('<label>').text('Company Website: '),
      $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
      obj.type == 'external' ? $('<br /><button>').addClass('edit-btn').text('Edit').attr({'data-toggle':'modal', 'data-target':'#updateData'}) : ''
      )
    )
  });
}

var objIndex;
$(document).on('click', '.edit-btn', function(){

  objIndex = $(this).parents('.box').index();

  var $toolName = $('#newToolName');
  var $toolURL = $('#newToolUrl');
  var $toolInputs = $($toolName).add($toolURL);

  $toolInputs.on('change', function(e) {

    var toolName = $toolName.val();
    var toolURL = $toolURL.val();

    $toolInputs.prop('required', toolName || toolURL);

  });


    $('#updateForm').submit(function(e){
    var toolName = $toolName.val()
    var toolURL = $toolURL.val()

    var toolFilled = !!toolName && !!toolURL;
    var toolUnfilled = !toolName && !toolURL;

    if (toolFilled || toolUnfilled) {
      updateData(objIndex);
      return false;
    }
    return false;
    });
});

function updateData(index) {
  companyName = $('#companyName').val();
  companyUrl = $('#companyUrl').val();
  toolName = $('#newToolName').val();
  toolURL = $('#newToolUrl').val();
  var upObj = {
  company: companyName,
  url: companyUrl,
  toolName: toolName,
  toolURL: toolURL,
  type: 'external'
  }
  myData.splice(index, 1, upObj);
  console.log(myData[index]);
  createDisplay();
  alert('Data updated successfully!');
}

.box {
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

</div>

<button id="createData">Create divs</button>
<!-- Modal -->

<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
  <!-- Modal Header -->
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
      </button>
    <h4 class="modal-title" id="myModalLabel">Update Data</h4>
    </div>
    <form id="updateForm">
    <!-- Modal Body -->
      <div class="modal-body">
      <div class="form-group">
        <label class="col-sm-4 control-label" for="companyName">Company Name</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" id="companyName" placeholder="Company Name" required />
        </div>
      </div>
      <div class="form-group">
      <label class="col-sm-4 control-label" for="companyUrl">Website</label>
      <div class="col-sm-8">
        <input type="url" class="form-control" id="companyUrl" placeholder="Company URL" required />
      </div>
      </div>
        <div class="form-group">
      <label class="col-sm-4 control-label" for="newToolName">Tool Name</label>
      <div class="col-sm-8">
        <input type="text" class="form-control" id="newToolName" />
      </div>
      </div>
        <div class="form-group">
      <label class="col-sm-4 control-label" for="newToolUrl">Tool URL</label>
      <div class="col-sm-8">
        <input type="url" class="form-control" id="newToolUrl" />
      </div>
      </div>
      </div>
  <!-- Modal Footer -->
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button class="btn btn-primary">Save changes</button>
      </div>
    </form>
  </div>
  </div>
</div>

Answer 1

您可以为class解除绑定点击事件，例如：

$(document).off('click', '.edit-btn');

它会unbind之前的事件监听器'.edit-btn'

Answer 2

删除 .edit-btn 单击事件，其中包含更改事件和提交事件，因此每次单击 .edit-btn

时事件都会绑定

var myData = [{
  company: "ABC",
  url: "www.abc.com",
  type: "internal"
}, {
  company: "CDE",
  url: "www.cde.com",
  type: "internal"
}, {
  company: "DEF",
  url: "www.def.com",
  toolName: "reportTool",
  toolURL: "http://www.toolURL.com",
  type: "external"
}, {
  company: "EFG",
  url: "www.efg.com",
  type: "internal"
}, {
  company: "FGH",
  url: "www.fgh.com",
  type: "external"
}];

$('#createData').click(function() {
  createDisplay();
});

function createDisplay() {
  $('.container').empty();
  myData.forEach(function(obj) {
    $('.container').append(
      $('<div>').addClass('box').append(
        $('<label>').text('Company Website: '),
        $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
        obj.type == 'external' ? $('<br /><button>').addClass('edit-btn').text('Edit').attr({
          'data-toggle': 'modal',
          'data-target': '#updateData'
        }) : ''
      )
    )
  });
}


  objIndex = $(this).parents('.box').index();

  var $toolName = $('#newToolName');
  var $toolURL = $('#newToolUrl');
  var $toolInputs = $($toolName).add($toolURL);

  $toolInputs.on('change', function(e) {

    var toolName = $toolName.val();
    var toolURL = $toolURL.val();

    $toolInputs.prop('required', toolName || toolURL);

  });
  
  $('#updateForm').submit(function(e) {
    var toolName = $toolName.val()
    var toolURL = $toolURL.val()

    var toolFilled = !!toolName && !!toolURL;
    var toolUnfilled = !toolName && !toolURL;

    if (toolFilled || toolUnfilled) {
      updateData(objIndex);
      return false;
    }
    return false;
  });
  
function updateData(index) {
  companyName = $('#companyName').val();
  companyUrl = $('#companyUrl').val();
  toolName = $('#newToolName').val();
  toolURL = $('#newToolUrl').val();
  var upObj = {
    company: companyName,
    url: companyUrl,
    toolName: toolName,
    toolURL: toolURL,
    type: 'external'
  }
  myData.splice(index, 1, upObj);
  console.log(myData[index]);
  createDisplay();
  alert('Data updated successfully!');
}

.box {
  height: 100px;
  background-color: skyblue;
  border: 1px solid black;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

</div>

<button id="createData">Create divs</button>
<!-- Modal -->

<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
      </button>
        <h4 class="modal-title" id="myModalLabel">Update Data</h4>
      </div>
      <form id="updateForm">
        <!-- Modal Body -->
        <div class="modal-body">
          <div class="form-group">
            <label class="col-sm-4 control-label" for="companyName">Company Name</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="companyName" placeholder="Company Name" required />
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label" for="companyUrl">Website</label>
            <div class="col-sm-8">
              <input type="url" class="form-control" id="companyUrl" placeholder="Company URL" required />
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label" for="newToolName">Tool Name</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="newToolName" />
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label" for="newToolUrl">Tool URL</label>
            <div class="col-sm-8">
              <input type="url" class="form-control" id="newToolUrl" />
            </div>
          </div>
        </div>
        <!-- Modal Footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

警报在更新数据时逐渐弹出

Alert popping up incrementally on updating data

jquery

object

dynamic

bootstrap-modal

unbind