0

我的 html 代码中有以下 div：

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

我使用contentEditablediv 作为制作自动扩展文本框的简单、跨浏览器的方法。我还在对用户输入此 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!");
    });
};

但该事件永远不会发生，即使用户编辑红色文本也是如此。使用浏览器的开发人员工具，我可以看到事件处理程序就在那里，它只是永远不会被触发。是contentEditablediv 上的属性导致跨度接收事件吗？我也尝试过自己制作跨度contentEditable，但行为仍然相同。

4

1 回答 1

1

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

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

因为您的跨度是在初始加载 DOM 之后添加的，所以没有附加按键事件侦听器，因为没有任何东西可以附加它们。Jquerylive通过将这些侦听器附加到（在这种情况下）任何具有“突出显示”类的东西来为您解决这个问题，无论它们何时添加到 DOM。

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

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

你有没有读过这个：

contenteditable div中子元素的键盘事件？

于 2010-08-25T07:05:06.087 回答