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请求，第二个点击两个，依此类推。我怎么能解决这个问题？

我也试过了click函数intead，但是ready函数没有给出我在ajax数据选项中传递的更新参数。

Answer 1

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

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

Answer 2

试试这个。

<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 3

尝试使用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

使用ajax的click事件上的Fancybox会触发多个ajax请求

3 个答案: