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，因此您可以在click #requestForm处理程序之外绑定click事件：

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

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

Onclick功能触发多次

2 个答案: