如何在 bootstrap 弹出窗口中禁用多个 ajax 调用

Question

我实现了弹出窗口。每当您单击一个元素时，我都会发出 AJAX 请求。不幸的是，有两个 AJAX 呼叫正在发送。我该如何防止这种情况？我只想打一个 AJAX 电话。

$(".btn-course-user").popover({
  html: true,
  trigger: 'manual',
  viewport: '',
  template: '',
  placement: 'bottom',
  content: function() {
    return $.ajax({
      url: 'lorem/ipsum/',
      dataType: 'html',
      async: false
    }).responseText;
  }
}).click(function(e) {
  $(this).popover('toggle');
});

每当我使用 class 选择器 .btn-course-user 单击元素时，它都会发送两个 AJAX 请求。有人可以帮我防止它吗？我想发送一个请求。

Answer 1

这是瞎猜，但请考虑运行弹出窗口之前的请求，因为它可能在实例化期间多次引用 content，导致 ajax 触发不止一次：

$(".btn-course-user").click( e => {
  // maybe show a loading message....
  let thisObj = $(this) ;
  $.ajax({
   url: 'lorem/ipsum/',
   dataType: 'html'
  }).done(function(ajaxContent) {
   thisObj.popover({
        html: true,
        trigger: 'manual',
        viewport: '',
        template: '',
        placement: 'bottom',
        content: ajaxContent
    }).off('click').click(function (e) {
        $(this).popover('toggle');
    });
  });
});

Answer 2

问题是我没有为弹出窗口添加标题属性。

For more clarity

如何在 bootstrap 弹出窗口中禁用多个 ajax 调用

How to disable multiple ajax call in a bootstrap popover

javascript

jquery

bootstrap-popover