jQuery 事件只会运行一次答案

【问题标题】：jQuery event will only run oncejQuery 事件只会运行一次
【发布时间】：2015-03-02 17:17:43
【问题描述】：

我正在使用table2excel 插件，它允许我将表格内容下载到 Excel 文件中。它第一次运行良好，但每次页面加载只能让我下载一次。

我尝试将$("#export").click(function(){ 更改为$("#export").on('click', function(){，但这不起作用。 $('#export').click 已在文档中准备就绪

// click function on page
$("#export").click(function(){
  $("#table2excel").table2excel({
    // exclude CSS class
    exclude: ".noExl",
    name: "Excel Document Name"
  }); 
});

// external js file that gets called
//table2excel.js
;(function ( $, window, document, undefined ) {
        var pluginName = "table2excel",
                defaults = {
                exclude: ".noExl",
                name: "Table2Excel"
        };

        // The actual plugin constructor
        function Plugin ( element, options ) {
                this.element = element;
                // jQuery has an extend method which merges the contents of two or
                // more objects, storing the result in the first object. The first object
                // is generally empty as we don't want to alter the default options for
                // future instances of the plugin
                this.settings = $.extend( {}, defaults, options );
                this._defaults = defaults;
                this._name = pluginName;
                this.init();
        }

        Plugin.prototype = {
            init: function () {
                var e = this;
                e.template = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\"><head><!--[if gte mso 9]><xml>";
                e.template += "<x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions>";
                e.template += "<x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>";
                e.tableRows = "";

                // get contents of table except for exclude
                $(e.element).find("tr").not(this.settings.exclude).each(function (i,o) {
                    e.tableRows += "<tr>" + $(o).html() + "</tr>";
                });
                this.tableToExcel(this.tableRows, this.settings.name);
            },
            tableToExcel: function (table, name) {
                var e = this;
                e.uri = "data:application/vnd.ms-excel;base64,";
                e.base64 = function (s) {
                    return window.btoa(unescape(encodeURIComponent(s)));
                };
                e.format = function (s, c) {
                    return s.replace(/{(\w+)}/g, function (m, p) {
                        return c[p];
                    });
                };
                e.ctx = {
                    worksheet: name || "Worksheet",
                    table: table
                };
                window.location.href = e.uri + e.base64(e.format(e.template, e.ctx));
            }
        };

        $.fn[ pluginName ] = function ( options ) {
                this.each(function() {
                        if ( !$.data( this, "plugin_" + pluginName ) ) {
                                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
                        }
                });

                // chain jQuery functions
                return this;
        };

})( jQuery, window, document );

【问题讨论】：

后续点击是否会触发点击回调（初始点击后）？你能分享一个可以重现的沙箱吗？
检查控制台错误；如果您的浏览器在运行函数时捕获到一个，它将阻止任何后续调用运行。在 Firefox 或 Chrome 中，按F12 打开开发者工具，按export 时检查console 标签。
这是jsfiddle.net/puqxvrqu
我从未使用过该插件，但听起来确实很有趣，但我只是想知道您是否也为第二次单击使用相同的文件名。如果是这样，您可以尝试使用不同的名称，例如在名称中添加一些索引值。每次点击 index + 1 或类似的东西后，可以更改索引值。
哇，谢谢你的小提琴。现在我对其进行了测试——我第一个通过 Web 浏览器创建的 excel 文件 :-)

标签： javascript jquery

【解决方案1】：

由于 jquery 插件中的这个代码块，它只执行一次：

$.fn[ pluginName ] = function ( options ) {
this.each(function() {
    if ( !$.data( this, "plugin_" + pluginName ) ) {
        $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
    }
});

// chain jQuery functions
return this;

};

$("#table2excel") 仅初始化一次并跳过后续时间。

对您的代码进行了一些更改：

$("button").click(function(){
    var $table = $('#table2excel');
    $table.removeData(); //data is removed, previous when data existed was preventing initialization of table2excel
    $table.table2excel({
        exclude: ".noExl",
        name: "Excel Document Name"
    }); 
});

你可以在这里看到它的工作原理：http://jsfiddle.net/peterdotjs/bpLsrdy2/4/

【讨论】：

【解决方案2】：

其他的

$("#export").click(function(){
 $("#table2excel").table2excel({
 // exclude CSS class
  exclude: ".noExl",
  name: "Excel Document Name"

}); });

如果他们第二次点击它，你希望发生什么不同的事情？

您可能会觉得它只工作了一次，它已经应用了更改，因此如果再次单击，工作就完成了，因此没有其他操作可做。

这是在脚本不断运行且没有错误的假设下进行的。如果有错误，您可以通过在 Chrome 中按 f12 来检查。在屏幕的右上角，您应该看到是否有错误。如果它正在运行，然后在单击操作期间失败，则这可能是您发现问题的根源。

【讨论】：

我正在寻找它来启动另一个 excel 文档创建
另外注意，如果函数以后依赖另一个函数，JS脚本会周期性读取。
您是否考虑过针对多次下载的浏览器保护？顺便说一句，在 IE 中尝试过，没有响应。仅供参考

【解决方案3】：

根据脚本（jquery.table2excel.js）的困扰不要让你多次运行它所以为了解决这个问题首先添加到文件脚本的结尾并在页面加载后添加指向脚本的链接，现在你可以编写你的函数来调用导出到 excel

<script>
     $(document).ready(function(){
            $("#MyplaginEXL").attr("src","/TableToExcel/jquery.table2excel.js")
        });


    function PrintTable()
        {
      
            $("#IdTable").table2excel({
                exclude: ".noExl",
                filename: "FileName",
                fileext: ".xls",
                exclude_img: true,
                exclude_links: true,
                exclude_inputs: true,
                preserveColors: true
        });
     
    }

【讨论】：