修改HTML标签而不丢失附加的事件侦听器

Question

我正在尝试修改列表元素内的文本，其中还包含另一个html元素，该HTML元素用于在点击时删除列表元素。

HTML结构如下：

<ul class="e-ul e-boxes">
    <li class="e-options" data-value="1">January<span class="e-icon e-close" unselectable="on"></span></li>
    <li class="e-options" data-value="2">February<span class="e-icon e-close" unselectable="on"></span></li>
</ul>

当用户从下拉列表中选择一个月时，上方的HTML由小部件（ejDropdDownList）生成。 看起来像这样：

LI内的元素是X，该X具有由小部件附加的事件侦听器，并且在单击时会删除相对的LI。

我添加了一个脚本，一旦用户选择了4个月以上，该下拉列表的文本列表中的月份名称便被缩写，但是我丢失了关联的点击事件< / strong>。

function sortSelectedMonthText() {
        var mylist = $('#months_container ul.e-ul');
        var listItems = mylist.children('li').get();
        listItems.sort(function (a, b) {
            return $(a).data('value') - $(b).data('value');
        });


        $.each(listItems, function (idx, itm) {
            if (listItems.length > 4) {
                //more than 4 months selected: replace w abbreviated text
                var monthVal = $(itm).data('value');
                var monthName = monthNames[monthVal - 1];
                itm.innerHTML= itm.innerHTML.replace(monthName,monthName.substring(0,3));
            }
            mylist.append(itm);
        });
}

，这是结果： ，但X不再起作用！

在这里您可以找到完整的工作代码：https://jsplayground.syncfusion.com/vpdrjvq0

我如何避免失去听众？

或者，一旦我修改了LIs文本，有没有办法识别监听者并将其重新连接？

Answer 1

您必须在文本节点上进行操作，而不是在父li元素上进行操作，才能保留该项和子项的其他属性。 因此该功能应固定为：

function sortSelectedMonthText() {
    var mylist = $('#months_container ul.e-ul');
    var listItems = mylist.children('li').get();
    listItems.sort(function (a, b) {
        return $(a).data('value') - $(b).data('value');
    });

    $.each(listItems, function (idx, itm) {
        if (listItems.length > 4) {
            var monthVal = $(itm).data('value');
            var monthName = monthNames[monthVal - 1];
            itm.firstChild.textContent = itm.firstChild.textContent.substring(0,3);
            console.log(itm);
        }
        mylist.append(itm);
    });
}

Answer 2

使用.innerHTML时，您将覆盖HTML，包括所有附加事件。尝试将修剪后的月份名称分配给itm.innerTEXT： itm.innerTEXT = itm.innerTEXT.replace(monthName,monthName.substring(0,3));

Answer 3

在修改span并重新插入之前，您可以detach li元素，它将保留其关联的侦听器：

var span = $(itm).children('span').detach();
itm.innerHTML = itm.innerHTML.replace(monthName, monthName.substring(0, 3));            
$(itm).append(span);