jQuery事件只会运行一次

时间:2015-03-02 17:17:44

标签: javascript jquery

我正在使用table2excel插件,这样我就可以将表内容下载到excel文件中。它第一次工作正常,但它只允许我每页加载一次下载。

我尝试将$("#export").click(function(){更改为$("#export").on('click', function(){,但这不起作用。 $(' #export'。)点击是在doc ready

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

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

其他

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

}); });

如果他们第二次点击它,您希望以不同的方式发生什么?

您可能感觉只是工作一次,是因为它已经应用了更改,所以如果再次点击则完成工作时没有其他操作要做。

这是假设脚本一直没有错误。如果有错误,您可以通过在Chrome中按f12来检查。在屏幕的右上角,您应该看到是否有错误。如果它正在运行,然后在单击操作期间失败,这可能是您找到问题的来源。

答案 2 :(得分:0)

根据脚本(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
        });
     
    }