Javascript。创建具有不同URL的两个按钮。但最后一个按钮覆盖了旧按钮

我的代码有一个按钮，可以将文件打印成pdf格式（工作正常）。现在我想添加另一个按钮，只需在html页面中打印它。我添加了新按钮，它也可以工作

问题是，现在当我创建一个新按钮时，它将覆盖旧按钮上的it方法。因此，两个按钮将执行相同的操作。（两者都以html格式打印）

以下是我的部分代码：

发票数据表的函数如下所示：

function invoiceDatatable(tableId, extras, url, optionParser) {
 var options = $.extend(true, {}, documentOptions, {
  tableId: tableId,
 url: url || '/api/invoices/?type=i',
  extras: extras
});

for (var i = 0; i < self.tasks.length; i++) {
var task = self.tasks[i];
var taskButton = $('<button type="button">' + (task.label || task) + '</button>');
taskButton.addClass('btn btn-default');
$(taskButtons).append(taskButton);
if (task.action) {
  // An entry point for custom actions
  $(taskButton).click(function(){
    task.action(self.selected);
  })
} else {
  $(taskButton).click(function () {
    var downloadUrl = task.url + '?' + task.queryParam + '=' + self.selected.join(',');
    downloadUrl += "&ordering=" + self.ordering()['ordering'];
    $(infoPanel + ' .alert').remove();
    $(infoPanel).append('<div class="alert alert-info">' +
      '<i class="fa fa-circle-o-notch fa-spin"></i> Building document' +
      '</div>');
    $.ajax(downloadUrl, {
      success: function (data) {
        function doPoll(url, success) {
          $.ajax(jobUrl, {
            type: "HEAD",
            success: function (pdfData, status, xhr) {
              if (xhr.status == 202) {
                setTimeout(function () {
                  doPoll(url, success)
                }, 2000);
              } else {
                success()
              }
            }
          });
          $.ajax(url, function (data) {
            alert(data);  // process results here
            setTimeout(doPoll, 5000);
          });
        }

在这里，我创建了两个按钮及其url-代码始终使用上次创建的按钮：

options.tasks.push({
url: '/print_to_pdf',
queryParam: 'documents',
label: '<i class="fa fa-print"></i> Print pdf'
});

options.tasks.push({
url: '/print_to_html',
queryParam: 'documents',
label: '<i class="fa fa-print"></i> Print html'
});

options.tasks.push({
url:“/print_to_pdf”，
queryParam:“文档”，
标签：“打印pdf”
});
options.tasks.push({
url:“/print_to_html”，
queryParam:“文档”，
标签：“打印html”
});

最后，按钮任务的代码如下所示：

function invoiceDatatable(tableId, extras, url, optionParser) {
 var options = $.extend(true, {}, documentOptions, {
  tableId: tableId,
 url: url || '/api/invoices/?type=i',
  extras: extras
});

for (var i = 0; i < self.tasks.length; i++) {
var task = self.tasks[i];
var taskButton = $('<button type="button">' + (task.label || task) + '</button>');
taskButton.addClass('btn btn-default');
$(taskButtons).append(taskButton);
if (task.action) {
  // An entry point for custom actions
  $(taskButton).click(function(){
    task.action(self.selected);
  })
} else {
  $(taskButton).click(function () {
    var downloadUrl = task.url + '?' + task.queryParam + '=' + self.selected.join(',');
    downloadUrl += "&ordering=" + self.ordering()['ordering'];
    $(infoPanel + ' .alert').remove();
    $(infoPanel).append('<div class="alert alert-info">' +
      '<i class="fa fa-circle-o-notch fa-spin"></i> Building document' +
      '</div>');
    $.ajax(downloadUrl, {
      success: function (data) {
        function doPoll(url, success) {
          $.ajax(jobUrl, {
            type: "HEAD",
            success: function (pdfData, status, xhr) {
              if (xhr.status == 202) {
                setTimeout(function () {
                  doPoll(url, success)
                }, 2000);
              } else {
                success()
              }
            }
          });
          $.ajax(url, function (data) {
            alert(data);  // process results here
            setTimeout(doPoll, 5000);
          });
        }

for（var i=0；i

如何修复代码，使每个按钮都有自己的功能

---

我认为是push方法覆盖了动作。你们怎么看？

看起来像是一个封装问题，因为变量声明被提升（并且不限于

for

循环）。使用

而不是
for
循环。forEach

：

self.tasks.forEach(function(task) {
    var taskButton = $('<button type="button">' + (task.label || task) + '</button>');
    taskButton.addClass('btn btn-default');
    ...
});