jQuery 事件只會運行一次
[英]jQuery event will only run once
問題描述
我正在使用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 );
3 個解決方案
解決方案1
1 已采納 2015-03-02 17:51:35
由於 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
0 2015-03-02 17:26:31
而不是
$("#export").click(function(){
$("#table2excel").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Excel Document Name"
}); });
如果他們第二次點擊它，你希望發生什么不同的事情？
您可能會感覺只工作一次，即它已應用更改，因此如果再次單擊工作已完成，則無需執行其他操作。
這是在腳本不斷運行沒有錯誤的假設下。 如果有錯誤，您可以通過在 Chrome 中按 f12 來檢查。 在屏幕的右上角，您應該會看到是否有錯誤。 如果它正在運行，然后在單擊操作期間失敗，這可能是您查找問題的來源。
解決方案3
0 2021-06-13 04:59:20
根據腳本 (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
});
}
一次運行jQuery事件處理程序
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.