jQuery .click() doesn't fire when element is being modified with .text()

Question

I've noticed that, on some platforms, it can be very difficult to click text that is being continually modified. The click event doesn't always trigger when the user clicks elements that are being modified resulting in an unresponsive interface.

For example, see this http://jsfiddle.net/hq9Rh/2/

In that example, there are four elements:

1. Replaces its text value every 100th millisecond and is almost impossible to click.

2. Replaces its text with an identical text. Is equally difficult to click.

3. Only writes to the element if the text is different. It's much more responsive to clicks.

4. Static, and perfectly clickable.

Here's the code to update the four elements:

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);
}

What is going on? Is there any way to fix this?

I'm running Chrome 32 on Windows.

Answer 1

It's because the text node within the element you're updating keeps getting destroyed and recreated, so the click may miss the text node.

You can avoid it by updating the value of the text node, rather than destroying and recreating it:

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

Updated Fiddle