Question

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

个人资料搜索页面一次显示10个结果。每个结果行都包含一个删除按钮。单击删除按钮时，将显示一个模式，用于警告用户有关删除操作的信息并要求确认。确认后，模态淡出，删除的行将从结果中删除。

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

$('#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);
      }
    });
  }
});

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

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

从点击按钮分配值？如果它没有与新按钮绑定，它甚至会如何触发事件？（我意识到它并不是一个真正的新按钮，但是我想要的属性被分配了适当的值）

我看了解这个解决方案，但添加.off（）对我没有任何好处： Variable keeps old value

模式的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);
      });
    });
  }
});

Answer 1

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

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

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

<强>更新

这是一篇简短的example

JQuery在变量赋值上保留旧值

1 个答案: