代码之家 › 专栏 › 技术社区 › Giox

在不丢失附加事件侦听器的情况下修改HTML标记

syncfusion html jquery javascript

Giox · 技术社区 · 7 年前

我在试着它还包含另一个html元素,用于在单击时删除list元素。

<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>

是由小部件生成的 (ejDropdDownList)当用户从下拉列表中选择月份时。它看起来是这样的:

LIs中的元素是X,它有一个由小部件连接的事件监听器,单击时,相对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) {
                //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

我该怎么办 避免失去听众 ?

3 回复 | 直到 7 年前

Mattia Pontonio 7 年前

你必须在手术台上做手术 文本节点 ,不在父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);
    });
}

DSCH 7 年前

当你使用 .innerHTML 您正在覆盖包含任何附加事件的HTML。尝试将修剪后的月份名称分配给 itm.innerTEXT 取而代之的是: itm.innerTEXT = itm.innerTEXT.replace(monthName,monthName.substring(0,3));

msg 7 年前

你可以 detach 这个 span 修改前的元素 li 并重新插入,它将保留其关联的侦听器:

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

推荐文章