我有一个动态生成div内容的按钮Create
。在这个内容中,我有一个Save
按钮,执行ajax调用以保存在这个动态生成的div内容中输入的数据。在相同的动态内容中,我有一个Delete
按钮,可以删除此div内容以及从ajax调用中保存的数据。问题是我从db获取id作为ajax Saved
内容的返回。到目前为止,一切都很好。因此我可以使用此id执行删除操作。
我的问题是如何将此id
传递给动态生成内容中删除按钮的属性,这样当我单击删除按钮时,相应的div内容数据将从数据库中删除。
var idToDelete = 0;
$('.js-create-btn').click(function () {
var divContent = `<div class="serv">
<div class="serv__menu-title">
<input type="text" id="menu-title" class="orga-title js-menu-title" placeholder="Enter a value">
<button class="mdl-button mdl-js-button save-btn js-menu mdl-button--icon">
<i class="icon-add"></i>
</button>
<button class="mdl-button mdl-js-button delete-menu- js-menu-title mdl-button--icon" id-to-delete="">
<i class="icon-delete"></i>
</button>
</div>
现在我定位动态添加内容中的Save
按钮,将值保存为:
$(document.body).on('click', 'button.js-save', function () {
var portion = $(this).closest('.serv__menu');
var name = portion.find('input[type="text"]').val();
var datatoInsert = {
name: name
};
$.ajax({
type: 'POST',
url: '@Url.Action("SaveDetails", "MainMenu")',
data:
{
valDetails: JSON.stringify(datatoInsert)
},
success: function (data) {
alert('Value saved');
idToDelete = data;
},
error: function () {
console.log('Error');
}
});
我的问题是如何将此idToDelete
传递给<button class="mdl-button mdl-js-button delete-menu- js-menu-title mdl-button--icon" id-to-delete=""><i class="icon-delete"></i></button>
id-to-delete
属性,因为这是动态生成的?请帮忙。