[3.0][Solved]child() sometimes return null

[evening]

I have a regular simple table with many cells, and I want to make a simple hover handler on the cells.

Ext.select('.mytab td').hover(
            function (e, t) {
                Ext.get(t).insertHtml("beforeEnd", "<span>O</span>");
            }, 
            function (e, t) {
                Ext.get(t).child("span:last").remove();
            }
        );

I run this on the latest version of Firefox (3.0.8) with Firebug installed.
When I move my mouse over the cells (but the movement should not be too slow), for some cells I will get an error message in Firebug: Ext.get(t).child("span:last") is null.

The result is the same whether I am using Ext-core 3.0 beta 1 or Ext-js 2.2.1.

If I do some checking before removal like this:

function (e, t) {
                var a = Ext.get(t).child("span:last");
                if (a) a.remove();
            }

then there will be no error, but the "<span>O</span>" will not be removed on some cells (it will just keep adding the span)

If I run it on Internet Explorer, it works fine.

BTW, I've also tried other ways using Ext.fly(), Ext.DomHelper.insertHtml() and Ext.DomQuery.selectNode(), removing the ":last" from the selector, but the result is still the same.

As a comparison, the corresponding jQuery code for the one that I am trying to do is :

       $('.mytab td').hover(
            function (e) {
                $(this).append("<span>O</span>");
            }, 
            function (e) {
                $(this).find("span:last").remove();
            }
        );

And it works fine.

So, maybe the way I do it in Ext-js is not correct, or the Firefox is buggy, or the child() function is buggy.

[BitPoet]

This might be a simple timing problem, with the mouseout event already being triggered before the function in mouseover has completed. You could try using DelayedTask.delay in the mouseout handler to check if that is the case.

[Condor]

In that case it's probably related to this bugreport.

[evening]

Thanks for the reply.
I tried the DelayedTask with no luck. So it's not a timing problem.

And then I have an idea to alert the t.innerHTML in case of Ext.get(t).child("span:last") returns null.
Apparently, it contains "O", it means I do mouseout on top of <span>. Argument "t" refers to the <span> while "this" refers to <td>.
So, I just have to replace t with "this" like this:

        Ext.select('.mytab td').hover(
            function (e, t) {
                Ext.get(this).insertHtml("beforeEnd", "<span>O</span>");
            }, 
            function (e, t) {
                Ext.get(this).child('span:last').remove();
            }
        );

And it works fine.
Still wonder why it didn't result the same error in IE though.
But anyway, case closed.