将id属性传递给jquery中动态生成的内容

时间:2018-05-31 05:35:36

标签: javascript jquery

我有一个动态生成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属性,因为这是动态生成的?请帮忙。

0 个答案:

没有答案