使用SweetAlert.js在单独的javascript代码中调用函数.不同范围的麻烦
Using SweetAlert.js to call a function in separate javascript code. Trouble with different scopes
我正在制作一个网站,我有一个功能,允许用户拖放特定类型的文件,然后获得有关该文件的更多信息。我的代码工作得很好,除了一件事。我有一个警告框(实际上是一个SweetAlert框),其中显示了用户想要查看的信息。我有处理文件的代码,然后制作json,最后制作有三个按钮的html代码,每个按钮都有自己的功能,驻留在我的javascript中。我的问题是,我希望用户能够点击三种不同类型的按钮来做各种事情,但SweetAlert框作为我的网站顶部的一个新的html页面,并有自己的范围。警告框不承认我的javascript函数是存在的,所以它什么也不做。
为了调用这个警报,我使用了一个ajax请求。这是调用函数的成功消息。数据为json格式。 success: function(data) {
informUser(printData(data))
},
这是我的javascript打印json格式和按钮。我没有包括一些简单的部分,所以让我知道,如果事情不让我的代码有意义。
function printData(data) {
var str = ""
str += '<p>Your file was added!</p>';
str += "<p>You can access it at these locations: </p>";
str += "<button onclick='changeView()'/>View all files</button>";
str += "<button onclick='downloadCurrent()'/>Download the current file</button>";
str += '<p>To upload this, click here: </p>';
str +='<button onclick="addAsNewButton()">Add As New</button>';
return str;
};
这是我的SweetAlert,它在某种程度上就像它自己的javascript文件。
var informUser = function(message){
swal({title: "Congrats on uploading a file!", html: true, text: message, type: "info" });
};
我正在阅读有关SweetAlerts如何在其中包含函数的示例,我需要帮助调用我的。如果有人认为他们可以帮助我,我愿意解释任何其他可能需要的东西,包括我已经尝试和失败的事情。我甚至会感激如何解决这个问题的一般想法。这里是SweetAlert文档的链接http://t4t5.github.io/sweetalert/
我不确定你的代码是如何结构的。你必须确保函数是可见的。
一个简单的方法是:
window.changeView = function(){
// your code
};
window.downloadCurrent = function(){
// your code
};
window.addAsNewButton = function(){
// your code
};
// ...
function printData(data) {
var str = ""
str += '<p>Your file was added!</p>';
str += "<p>You can access it at these locations: </p>";
str += "<button onclick='window.changeView()'/>View all files</button>";
str += "<button onclick='window.downloadCurrent()'/>Download the current file</button>";
str += '<p>To upload this, click here: </p>';
str +='<button onclick="window.addAsNewButton()">Add As New</button>';
return str;
};
一个更好的方法是使用模块模式(http://toddmotto.com/mastering-the-module-pattern/):
)var yourModule = (function () {
return {
changeView : function(){
};
downloadCurrent : function(){
};
addAsNewButton : function(){
};
};
})();
// ...
function printData(data) {
var str = ""
str += '<p>Your file was added!</p>';
str += "<p>You can access it at these locations: </p>";
str += "<button onclick='window.yourModule.changeView()'/>View all files</button>";
str += "<button onclick='window.yourModule.downloadCurrent()'/>Download the current file</button>";
str += '<p>To upload this, click here: </p>';
str +='<button onclick="window.yourModule.addAsNewButton()">Add As New</button>';
return str;
};
我希望这对你有帮助。
编辑:一个更好的方法是在渲染之后附加事件(一个使用jQuery的例子):
var informUser = function(message){
swal({title: "Congrats on uploading a file!", html: true, text: message, type: "info" });
$(".btn-change-view").click(function(){ });
$(".btn-download-current").click(function(){ });
$(".btn-add-as-new").click(function(){ });
};
// ...
function printData(data) {
var str = ""
str += '<p>Your file was added!</p>';
str += "<p>You can access it at these locations: </p>";
str += "<button class="btn-change-view"/>View all files</button>";
str += "<button class="btn-download-current"/>Download the current file</button>";
str += '<p>To upload this, click here: </p>';
str +='<button class="btn-add-as-new">Add As New</button>';
return str;
};
注释后编辑:
如果只是这样,你可以这样做:
var informUser = function(message){
swal({title: "Congrats on uploading a file!", html: true, text: message, type: "info" });
$(".btn-change-view").click(changeView);
$(".btn-download-current").click(downloadCurrent);
$(".btn-add-as-new").click(addAsNewButton);
};
相关文章:
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 在输入字段上有两个函数调用,一个在Blur上,一个不在Angular中
- 如何在Javascript函数调用中循环变量
- Javascript:应为赋值或函数调用,但实际看到的却是表达式
- 如何远程检查JavaScript应用程序的函数调用堆栈
- javascript函数调用不起作用
- 为什么这个函数调用会破坏程序并导致未定义的变量
- 如何通过函数调用设置图像的src
- 从全局函数调用Ember控制器上的方法
- 为什么Jquery$.ajax在函数调用中触发所有statusCode,即使调用成功
- JavaScript函数调用(arg1)(arg2)
- 打印链接时,将javascript函数调用到链接中
- 在函数调用中封装数据除了隐藏数据之外还有什么优点
- 无法从JavaScript中的函数调用对象属性
- 对中的函数调用进行排序是回调的唯一方法
- 函数调用方法有什么用
- Javascript:JSHint:应为赋值或函数调用,但实际看到的却是表达式
- HTML5(Bootstrap)通过函数调用运行动画
- 函数调用不起作用
- 函数中的Javascript函数调用