带有 ajax 的 Fancybox on click 事件会触发多个 ajax 请求

Fancybox on click event with ajax fires multiple ajax request

本文关键字：ajax 请求 事件 Fancybox on click 带有      更新时间：2023-09-26

我得到了我想要的输出，但这不是最好的方法，因为 ajax 每次点击都会复制。

这是我的代码：

<a href="/messages/schedule" class="greenbtn fancybox">Schedule</a>
$('a.fancybox').click(function() {
  $('a.fancybox').fancybox({
   width : 600,
   height : 300,
   fitToView : false,
   autoSize : false,    
   type : 'ajax',
   ajax : { data : {'receiver_id' : $('#receiver_id').val(), 'subject' :  $('#subject').val(), 'body': CKEDITOR.instances.body.getData()}}
  });
});

第一次单击会触发一个 ajax 请求，第二次单击会触发两个，依此类推。我该如何解决这个问题？

我也尝试了点击的就绪函数，但就绪函数没有提供我在 ajax 数据选项中传递的更新参数。

在尝试了各种解决方案后，我终于解决了它。这是我的代码 

 $('a.fancybox').click(function() {
   $.ajax({
     type    : "POST",
     cache : false,
     url   : "/messages/schedule",
     data    : {'receiver_id' : $('#receiver_id').val(), 'subject' :  $('#subject').val(), 'body': CKEDITOR.instances.body.getData()},
     success: function(data) {
       $.fancybox(data, {
         width : 600,
         height : 300,
         fitToView : false,
         autoSize : false        
       });
     }
   });
  });

试试这个。

<a href="/messages/schedule" class="greenbtn fancybox">Schedule</a>
$(document).ready(function() {
  var getData = function() { return { data : {'receiver_id' : $('#receiver_id').val(), 'subject' :  $('#subject').val(), 'body': CKEDITOR.instances.body.getData()}}; };
  $('a.fancybox').fancybox({
   width : 600,
   height : 300,
   fitToView : false,
   autoSize : false,    
   type : 'ajax',
   ajax : getData
});

试试这个花哨的盒子 2：

<a href="/messages/schedule" class="greenbtn fancybox">Schedule</a>
$('a.fancybox').click(function() {
$('a.fancybox').off("click.fb-start");
  $('a.fancybox').fancybox({
   width : 600,
   height : 300,
   fitToView : false,
   autoSize : false,    
   type : 'ajax',
   live : false,
   ajax : { data : {'receiver_id' : $('#receiver_id').val(), 'subject' :  $('#subject').val(), 'body': CKEDITOR.instances.body.getData()}}
  });
});

用这个答案来形容它：解绑/销毁花式盒子 2 事件

相关文章：