使用.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