$.fancybox 不是一个函数(fancybox 弹出 ajax 响应)

Question

我想通过fancybox弹出ajax响应，我在控制台中看到了网络部分，响应还可以。但是我得到$.fancybox不是一个函数。 提前感谢！

$("#mysubmit").click(function(){
var myvar = {
"secure_key":"41561541561561","username":$("#username").val(),"password" :$("#password").val()};
$.ajax({
type: "POST",
url: "http://127.0.0.1/ajaxtest.php",
async: false,
data: myvar,
success: (function (response) {
var result =
"<div id='result'>" +
"<p>" + response + "</p>" +
"</div>";
//$.facybox is not a function HERE
$.fancybox(result, {
type: "html",
}); // show formated response
})
})
});

Answer 1

FancyBox 必须实例化在一个元素上。
你实际上试图在jQuery上实例化它...

试试这个：

success: (function (response) {
var result =
"<div id='result'>" +
"<p>" + response + "</p>" +
"</div>";
$("body").append( $(result) );
$(document).find("#result").fancybox(); // show formated response
})

Answer 2

如果有人搜索相同的问题，这是解决方案：

$("#mysubmit").click(function(){
var myvar = {
"secure_key":"41561541561561","username":$("#username").val(),"password" :$("#password").val()};
$.ajax({
type: "POST",
url: "http://127.0.0.1/ajaxtest.php",
async: false,
data: myvar,
success: (function (response) {
var result =
"<div id='result' style='display: none;'>" +
"<p>" + response + "</p>" +
"<a class='btn' data-fancybox-close=''>OK!</a>"+
"</div>";
$("body").append(result);
})
})
});

然后我将 #result 作为数据SCR添加到标记中，效果很好。

<a data-fancybox type="Submit" id="mysubmit" class="btn" data-src="#result" >Submit </a>