Question

我的html代码中有以下div：

<div id="expanderInput" tabIndex="1" contentEditable></div>

我正在使用contentEditable div作为制作自动扩展文本框的简单跨浏览器方法。我也正在对用户输入此div的内容进行输入验证。它应该是以逗号分隔的电子邮件地址列表。当用户尝试提交不正确的信息时，我的javascript会对输入进行分块并以红色突出显示所有不正确的块。

//split the address into the comma-separated chunks
var chunks = splitForward(forwardsTo);

//Grab each bad chunk one at a time and stick it in a span with a red-colored text
for(var i = 0; i < invalids.length; i++)
{
    var current = chunks[invalids[i]];
    current = '<span class="highlighted">' + current + '</span>';
    chunks[invalids[i]] = current;
}
$("#expanderInput").html(chunks.join());
initHighlighted();

数组'invalids'保存所有坏块的索引。到目前为止，一切都运行良好。但是一旦用户开始在红色文本中输入，我需要红色消失，但只是在那个范围内。例如，如果有两个坏块，每个都以红色突出显示，用户开始修复一个，另一个需要保持红色。

我尝试将事件监听器附加到跨度：

initHighlighted = function()
{
    $(".highlighted").keypress(function()
    {
        alert("It works!");
    });
};

但事件永远不会发生，即使用户用红色编辑文本也是如此。使用浏览器的开发人员工具，我可以看到事件处理程序在那里，它永远不会被启动。是div上的contentEditable属性导致跨度接收事件？我也试过让跨度本身内容可编辑，但行为仍然是一样的。

Answer 1

除非我弄错了，否则这应该可以解决你的问题：

initHighlighted = function()
{
    $(".highlighted").live("keypress",function()
    {
        alert("It works!");
    });
};

因为在初始加载DOM之后添加了跨度，所以没有附加keypress事件侦听器，因为没有任何内容可以附加到它们。 Jquery的live通过将这些侦听器附加到这个类别来解决这个问题，在这种情况下，无论何时将它们添加到DOM中，都会突出显示类。

阅读Jquery网站上的文档，以获得比我能给你的更好的解释：http://api.jquery.com/live/

编辑：我很抱歉没有正确阅读你的问题，并且在添加了“突出显示”的跨度之后意识到你正在附加按键监听器。

你读过这个吗：

Keyboard events for child elements in a contenteditable div?

contentEditable div中的span标记需要keypress事件

1 个答案: