ajax 的点击事件 Fancybox 触发多个 ajax 请求

Question

我得到了我想要的输出，但这不是最好的方法 bcoz 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 数据选项中传递的更新参数。

Answer 1

试试这个。

<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
});

Answer 2

为 fancybox 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()}}
  });
});

为此使用了这个答案： Unbind/Destroy fancybox 2 events

Answer 3

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

 $('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        
       });
     }
   });
  });

ajax 的点击事件 Fancybox 触发多个 ajax 请求

Fancybox on click event with ajax fires multiple ajax request

javascript

jquery

fancybox-2