javascript - 当使用 .text() 修改元素时，jQuery .click() 不会触发

Question

我注意到，在某些平台上，单击不断修改的文本可能非常困难。当用户单击正在修改的元素导致界面无响应时，点击事件并不总是触发。

例如，看这个 http://jsfiddle.net/hq9Rh/2/

在那个例子中，有四个元素:

1. 每 100 毫秒更换一次文本值，几乎无法点击。

2. 用相同的文本替换它的文本。也同样难以点击。

3. 仅当文本不同时才写入元素。它对点击的响应更快。

4. 静态且完全可点击。

这是更新四个元素的代码:

setInterval(updateList, 100);
var iteration = 0;

function updateList(){
    iteration++;
    $(".updating").text(iteration);
    $(".replaceSameText").text("SameText");
    var oldText = $(".replaceDifferentText").text();
    var newText = "SameText";
    if(oldText != newText)
        $(".replaceDifferentText").text(newText);
}

这是怎么回事？有什么办法可以解决这个问题吗？

我在 Windows 上运行 Chrome 32。

Answer 1

这是因为您正在更新的元素中的文本节点不断被破坏和重新创建，所以点击可能会错过文本节点。

您可以通过更新文本节点的值来避免它，而不是销毁并重新创建它:

$(".replaceSameText")[0].firstChild.nodeValue = "SameText";

Updated Fiddle