javascript - "confirm"模态 jquery 的奇怪行为

Question

我正在尝试使模式充当确认按钮。单击该按钮，将打开一个弹出窗口并询问"is"或“否”，如果是，则在数据库中存储一些信息，从 DOM 中删除该项目，然后在其他位置添加一个项目。但是，现在，如果他们单击确认"is"，它会多次运行 ajax 调用。我觉得它正在为 data-express="yes"的其他地方运行它，但我不知道为什么它可以...... $(this) 不应该只是被单击的按钮吗？我不明白这里有什么可以让它运行多次。

按钮 -

<ul class="list-inline center-block">
   <li><button type="button" class="btn btn-primary center-block express_button" data-confirm="yes" data-dismiss="modal">Yes</button></li>
   <li><button type="button" class="btn btn-primary center-block express_button" data-confirm="no" data-dismiss="modal">No</button></li>
</ul>

JS

$('.snf_interest').on('submit', function(e){
  e.preventDefault();
  var id = $(this).find('input[name=resid]').val();
  var ppcode = $('.placement_item_' + id + ' .pdcode' + id).text();
  var ppdate = $('.placement_item_' + id + ' .pp_date').text();
  var dcpname = $(this).find('input[name=dcpname]').val();
  var dcpemail = $(this).find('input[name=dcpemail]').val();
  var prefcom = $(this).find('input[name=prefcom]').val();
  var ppid = $(this).find('input[name=ppid]').val();
  var patientneeds = $('.placement_item_' + id + '       .patientneeds').text();
  var dcphone = $('.placement_item_' + id + ' .dcphone').text();
  var dcnote = $(this).find('input[name=notes]').val();
  $('#express_interest_modal').modal();
  //if(confirm('Are you sure you want to express interest in this patient')){
  $('.express_button').on('click', function(){
  console.log($(this));
  if($(this).data('confirm') == 'yes'){
  $.ajax({
     // url: "/snf/express_interest",
      type: "POST",
      data: { 'ppid' : ppid,
            'status' : status,
            'dcpname' : dcpname,
            'dcpemail' : dcpemail,
            'prefcom' : prefcom 
             },
      success:function(){
     // $('#interest_modal').modal('show');
      $('#panel-placement .panel-body').append('<ul class="list-group list-group-no-pad"><li class="list-group-item clearfix well well-sm"><label>'+ppcode+'| Posted: '+ppdate+'</label><form class="pull-right" action="http://dev.goodcareconnection.com/snf/" method="post"><input type="hidden" name="ppid" value="'+ppid+'"><div class="btn-group" role="group" aria-label="..."><input class="btn btn-sm btn-danger" type="submit" name="ppbutn" value="Hide This Patient"></div></form></li><li class="list-group-item clearfix"><div class="col-md-12"><label>Needs: <h5 class="patientneeds">'+patientneeds+'</h5></label></div></li><li class="list-group-item clearfix"><div class="col-md-4"><label>Posted by: <h5>'+dcpname+'</h5></label></div><div class="col-md-4"><label>Email: <h5>'+dcpemail+'</h5></label></div><div class="col-md-4"><label>Phone: <h5>(303) 570-9863 M: (303) 570-9863</h5></label></div></li><li class="list-group-item clearfix"><div class="col-md-6"><div class="form-group"><h5><label>Notes</label></h5><textarea id="ppnote35" class="form-control update_note" name="notes" readonly="">'+dcnote+'</textarea></div></div><div class="col-md-6"><form class="snf_interest"><button class="btn btn-danger btn-sm pull-right" name="submit">Remove Interest</button></form></div></li></ul>');
        $('.placement_item_'+ppid).remove();    
        var number = $('.express_badge').html();
        number = parseInt(number);
        number = number + 1;
        $('.express_badge').html(number);
        var number = $('.bulletin_count').html();
        number = parseInt(number);
        number = number - 1; 
        $('.bulletin_count').html(number);
      } 
  })
 }
})
});

Answer 1

问题源于在另一个事件处理程序中添加一个事件处理程序。

第一次提交被触发...express_button 元素没有执行先前附加的 ajax 的点击处理程序。它被添加到第一个提交事件中

单击"is"只会发出一个 ajax 请求。

下次提交被触发时，它将再次添加相同的事件处理程序。现在单击"is"将运行事件处理程序的 2 个实例并发出 2 个请求。

每次提交都会增加请求的数量

一个简单的解决方案是在使用点击处理程序后立即将其删除。但请注意，如果使用按钮以外的方法关闭模式，事件处理程序仍然存在，问题仍然存在

  $('.express_button').on('click', function(){
     $(this).off('click')
     // other code    
  });

更好的解决方案是通过存储需要发送的数据来分离提交和点击处理程序，以便在单击"is"时可以访问这些数据