更新数据时逐渐弹出警报答案

【问题标题】：Alert popping up incrementally on updating data更新数据时逐渐弹出警报
【发布时间】：2017-05-09 06:14:20
【问题描述】：

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

但是，当用户第二次编辑同一个对象时，它会引发两次相同的警报。同样，当同一个对象第三次更新时三次，以此类推。

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

另外，请注意，工具名称和工具 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>

【问题讨论】：

在您的if (toolFilled || toolUnfilled) 之前添加$('#updateForm').off("submit")
非常感谢！效果很好！

标签： jquery object dynamic bootstrap-modal unbind

【解决方案1】：

你可以解绑如下类的点击事件：

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

它将unbind上一个事件监听器附加'.edit-btn'

【讨论】：

我在我的代码中应该在哪里做呢？我是 jQuery 新手。
在点击事件功能完成后放置此代码。这样它就可以unbind 进一步的事件

【解决方案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>

【讨论】：