Question

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

按钮 -

<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的点击处理程序。它会在第一次提交事件中添加

点击“是”应该只做一个ajax请求。

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

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

一个简单的解决方案就是在使用后立即删除点击处理程序。请注意，如果使用除按钮之外的方法关闭模态，事件处理程序仍将存在并且问题将持续存在

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

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

使用“确认”模态jquery

1 个答案: