Javascript 带有ajax的Fancybox点击事件触发多个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()}}
  });
});

$（'a.fancybox'）。单击（函数（）{
$（'a.fancybox'）。fancybox({
宽度：600，
身高：300，
菲托维：错，
自动调整大小：false，
键入：“ajax”，
ajax:{data:{'receiver_id'：$（'receiver_id'）.val（），'subject'：$（'#subject'）.val（），'body'：CKEDITOR.instances.body.getData（）}
});
});

第一次单击激发一个ajax请求，第二次激发两个，依此类推。我怎样才能解决这个问题

我还尝试了ready函数intead of click，但ready函数没有提供更新的参数，我正在将这些参数传递到ajax数据选项中。

试试这个

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

$（文档）.ready（函数（）{
var getData=function（）{return{data:{'receiver_id'：$（'receiver_id'）.val（），'subject'：$（'#subject'）.val（），'body'：CKEDITOR.instances.body.getData（）}；}；
$（'a.fancybox'）。fancybox({
宽度：600，
身高：300，
菲托维：错，
自动调整大小：false，
键入：“ajax”，
ajax:getData
});

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

$（'a.fancybox'）。单击（函数（）{
$（'a.fancybox'）.off（“click.fb start”）；
$（'a.fancybox'）。fancybox({
宽度：600，
身高：300，
菲托维：错，
自动调整大小：false，
键入：“ajax”，
生活：假，
ajax:{data:{'receiver_id'：$（'receiver_id'）.val（），'subject'：$（'#subject'）.val（），'body'：CKEDITOR.instances.body.getData（）}
});
});

使用以下答案：

---

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

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

---

您使用同一类为每次单击创建一个fancybox，每次单击时都会再次触发新的fancybox。在创建新的fancybox之前删除旧的fancybox。解除绑定不会提供我在ajax数据部分获得的更新参数。我没有注意到您使用了fancybox 2，只是在刚才的标记中看到了它。我为它编辑了答案，请重试这并没有给我更新的参数，我在ajax中得到了：{data:}这个怎么样。我没有测试它。这不会传递参数。你注意到

live:false

参数了吗？包括live false并不是ajax。这很奇怪。live不应该更改ajax事件。可能是打字错误？