单击按钮打开对话框以动态添加列表项

Question

我有一个列表项的无序列表，每个列表项都包含一个按钮。单击此按钮时，我希望我的对话框打开关联的列表项。每个列表项都有对话框应显示的唯一文本。

这是我的HTML

    <ul id="filter-list" class="scrollable-menu text-center">
        @foreach (var filter in Model.GlobalFilters)
        {
            <li class="form-inline" data-id="@filter.FilterId.ToString()" style="margin-bottom: 8px">
                <button type="button" class="description-button" title="View/Edit Description" style="background-color:transparent;">
                    <i class="fa fa-sticky-note fa-2x" aria-hidden="true"></i>
                </button>

                <textarea type="text" class="description" title="Filter Description" style="display: none">@filter.Description</textarea>                    
            </li>
        }            
    </ul>

这是我的JQuery

$(document).ready(function () {
    $('.description').dialog({
        autoOpen: false,
        buttons: {
            'OK': function () {
                //var name = $('input[name="Description"]').val();
                //storeData(name);
                $(this).dialog('close');
            },
            'Cancel': function () {
                $(this).dialog('close');
            }
        }
    })

    $('button.description-button').on('click', function () {
        $(this).siblings('.description').dialog('open');
    })
});

我希望jquery对话框init可以为我的foreach循环生成的每个列表元素完成，但似乎只在第一个元素上完成。此外，单击按钮时，对话框甚至不会打开第一个元素。

任何见解将不胜感激。 Web开发的所有内容仍然是新手！

Answer 1

你可以使用事件委托技术解决你的问题，这是一篇介绍如何处理它的媒介文章event delegation

小例子

document.addEventListener('DOMContentLoaded', function() {

let app = document.getElementById('filter-list');

// attach event listener to whole container
 app.addEventListener('click', function(e) {
    if (e.target && e.target.nodeName === 'LI') {
     let item = e.target;
     alert('you clicked on item: ' + item.innerHTML);
    }
  });

});