我正在修改配置文件编辑器,并且遇到了删除功能的问题。
个人资料搜索页面一次显示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);
}
});
}
});
模态包含$('#deleteButton')元素。当我检查元素时,它具有正确的值。 当我在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);
});
});
}
});
答案 0 :(得分:0)
我不知道你是如何构建结果表的,或者它是否是第三种,但是可以通过以下方式解决:
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