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

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

syncfusion html jquery javascript

Giox · 技术社区 · 6 年前

我在试着它还包含另一个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 回复 | 直到 6 年前

Mattia Pontonio 6 年前

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

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

msg 6 年前

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

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前