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

更新小提琴