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

我正在尝试修改还包含另一个html元素的list元素内的文本，该元素用于在单击时删除list元素。

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个月以上，则下拉列表的文本列表中会缩写月份名称，但是我将关联的click事件丢失给了元素。

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文本，有没有办法识别监听者并将其重新附加到监听器？