javascript - 使用 SweetAlert.js 在单独的 javascript 代码中调用函数。不同范围的问题

Question

我正在制作一个网站，并且有一个功能允许用户拖放特定类型的文件，然后获取有关该文件的更多信息。除了一件事之外，我的代码运行良好。我有一个警报框(实际上是 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/ .

Answer 1

我不确定您的代码是如何构造的。您必须确保该函数是可见的。

一个快速而肮脏的方法是这样的:

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