jQuery事件将只运行一次

jQuery event will only run once

本文关键字：一次 运行 事件 jQuery      更新时间：2023-09-26

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

我尝试过将$("#export").click(function(){更改为$("#export").on('click', function(){，但没有成功。$（'#export'）.点击位于文档就绪内

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

由于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;

}；

CCD_ 3仅被初始化一次并且跳过随后的次数。

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

$("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/

其他然后

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

})；})；

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

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

这是在这样一个假设下进行的，即脚本一直没有错误。如果有错误，您可以通过在Chrome中按f12进行检查。在屏幕的右上角，你应该看到是否有错误。如果它正在运行，然后在单击操作过程中失败，这可能是您发现问题的原因。

根据脚本（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
        });
     
    }
相关文章：