jQuery保留变量赋值的旧值

debugcn 发表于 Dev

GForce

我正在修改配置文件编辑器，并且在删除功能方面遇到了问题。

配置文件搜索页面一次显示10个结果。每个结果行都包含一个“删除”按钮。单击删除按钮后，将显示一个模式，警告用户有关删除操作并要求确认。确认后，模态将淡出，并从结果中删除已删除的行。

此后，当单击并确认另一行中的删除按钮时，不会为用户名变量分配新值。

$('#deleteButton').on('click', function (e) {
  e.preventDefault();
  if ($(this).data().to_delete !== undefined) {
    var username = $(this).data().to_delete;
    var row = $(this).data().row_to_delete;
    $.ajax({
      url: getDjangoUrl('profile_delete', username),
      type: 'DELETE',
      dataType: 'json',
      success: function(result) {
        if (result.success) {
          bootstrapAlert('success', 'Successfully deleted profile ' + username);
          table.fnDeleteRow(row);
        } else if (result.error) {
          bootstrapAlert('Error', 'Error deleting profile ' + username);
        }
      },
      error: function() {
        bootstrapAlert('Error', 'You do not have permission to delete ' + username);
      }
    });
  }
});

模态包含$（'＃deleteButton'）元素。当我检查元素时，它具有正确的值。当我console.log（username）时，每次都会看到以前删除的用户名。
不应该

var username = $(this).data().to_delete;

从点击按钮分配值？如果不与新按钮相关联，它将如何触发事件？（我意识到这实际上不是一个新按钮，但是我想要的属性已分配了适当的值）

我查看了此解决方案，但添加.off（）并没有任何好处：变量保留旧值

模态的html：

<div id="deleteModal" class="modal hide fade in" style="display: block;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Are you are you want to delete this profile?</h3>
  </div>
  <div class="modal-body">
    This will permanently delete this profile file!
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a id="deleteButton" href="#" class="btn btn-primary" data-dismiss="modal" data-to_delete="abrown" data-row_to_delete="0">Delete</a>
  </div>
</div>

该表的构建如下：

var toolbar = '<a class="edit btn">Edit</a> <a class="btn btn-delete delete">Disable</a>';

var table = $('#profileTable').iidsBasicDataGrid({
  'bProcessing': true,
  'bServerSide': true,
  'bDeferRender': true,
  'sAjaxSource': getDjangoUrl('profile_order_list_json'),
  'aoColumns': [
    null,
    null,
    {
      'sWidth': '20%',
      'mData': null,
      'sClass': 'center',
      'sDefaultContent': toolbar,
      'bSearchable': false,
      'bSortable': false
    }
  ],
  'fnDrawCallback': function () {
    $('a.edit').each(function (button) {
      var username = $($(this).parents('tr')[0]).find('td').first().html();
      $(this).attr('href', getDjangoUrl('profile_edit', username));
    });
    $('a.delete').each(function (button) {
      var username = $($(this).parents('tr')[0]).find('td').first().html();
      $(this).attr('data-toggle', 'modal');
      $(this).attr('data-target', '#deleteModal');
      $(this).click(function () {
        var rowToDelete = table.fnGetPosition($(this).parent().parent().find('td')[0])[0];
        $('#deleteModal').find('#deleteButton').attr('data-to_delete', username);
        $('#deleteModal').find('#deleteButton').attr('data-row_to_delete', rowToDelete);
      });
    });
  }
});

卡洛斯·古兹曼

我不知道您如何构建结果表，或者它是第三个结果表，但是可以解决的方式如下：

function buildResultSearchTable(dataCollection) {
    var rows = [];

    // Omitted for simplicity
    dataCollection.forEach(function (data, index) {
        var $rowTpl = $('Template for row');
        $rowTpl.data('to_delete', data);
        // Process for filling the columns
        rows.push($rowTpl); 
    }, this);

    // $table variable is defined in some place of code and contains a reference to <TABLE> tag
    $table.append(rows);
    $table.on('click', 'tr > td > input:button', function (event) {
        var username = $(this).parents('tr').data('to_delete');

        if (username) {
            // Any delete logic
        }
    });
}

希望此解决方案可以帮助您解决问题。

更新：

这是一个简单的例子

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。