Onclick函数多次触发

Question

在添加注释模式内部保存时出现问题。 当我单击模式内部的“保存”时，它会根据我之前打开该模式的次数触发。

我正在使用的表单是动态的，因此可能要添加1到许多注释。 我只想使用一种模式在隐藏字段（未显示）中插入评论

我很困惑为什么我点击

测试用例

Launch Page

Open the comment modal using the comment icon

Click Save

Repeat open and saving the comment modal multiple times.

Look inside of console to see

"In Save Comment: " + i

Where i equals the number of times it is in that function.

HTML

<form id="requestForm">
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#detailsModal"><span class="glyphicon glyphicon-share" aria-hidden="true"></span></button>
  <button type="button" class="btn btn-default" data-add-comment><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</form>

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="detailsModalLabel">User Details</h4>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <tbody>
            <tr>
              <td class="col-sm-3"><strong>Name</strong></td>
              <td class="col-sm-4" id="info-name"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- End Details Modal -->
<!-- Comments Modal -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="commentModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <textarea id="modalComTxt" class="form-control" rows="4" maxlength="512"></textarea>
        <p>Characters left: <span id="txtAreaCount">512</span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="save-comment" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

JAVASCRIPT

$("#requestForm").on('click', '[data-add-comment]', function() {
  var curComBtn = $(this);
  var curComment = curComBtn.prev().val();
  var modalTxt = $('#modalComTxt');
  var commentModal = $('#commentModal');

  modalTxt.val(curComment); //set the modal value with existing comment
  var i = 1;
  $('#txtAreaCount').text((512 - modalTxt.val().length)); //change text count in modal

  commentModal.modal('toggle');

  //Function when clicking save in modal

  $('#save-comment').click(function() {

    console.log("In Save Comment: " + i)
    i++
    console.dir(curComBtn.prev());
    curComBtn.prev().val(modalTxt.val());
  });

});

Answer 1

将下面的代码$("#requestForm").on('click', function(){...}处理程序之外。正在发生的事情是，每次您都将一个附加处理程序绑定到save-comment按钮单击事件。单击表单的[data-add-comment]按钮。

$('#save-comment').click(function() {

    var curComBtn = $('#requestForm').find('[data-target="#detailsModal"]');
    curComBtn.val( $('#modalComTxt').val() );

});

Answer 2

每次有人单击#requestForm您都将click eventlistener绑定到#save-comment 。 因此，第二次打开模式后，将有两个click监听器绑定到#save-comment 。

由于#save-comment不是动态添加的，因此可以在#requestForm click处理程序之外绑定click事件：

$('#requestform').click(function(){
  // do stuff
});

$('#save-comment').click(function(){
  // do other stuff
});