[jQuery] jQuery mouseover don't work(others do)

[Skeadr]

Ok, here is my problem i have these to code "Snippets". The one on the
Bottom works as intended, the
top one instead doesn't work. as you'll see, say are nearly the same,
except for the id.
I don't get the difference, why the one works and the other not ....

Hope somebody can help:)

PROBLEM CODE:
   //-------------------------------------------------------
    // the openSubs cell
    //-------------------------------------------------------
    var resultHeaderTableDashOpenSubs =
resultHeaderTableRow.insertCell(-1);
    resultHeaderTableDashOpenSubs.style.width = "6%";
    resultHeaderTableDashOpenSubs.style.textAlign = "center";
    resultHeaderTableDashOpenSubs.style.verticalAlign = "middle";
    resultHeaderTableDashOpenSubs.id = this.outerTagID + "_openSubs";

    var openSubPic = document.createElement("img");
    openSubPic.src = "_img/action/arrow_right.gif";
    openSubPic.id = this.outerTagID + "_openSubsPic";
    resultHeaderTableDashOpenSubs.appendChild(openSubPic);


    var resultObject = this;

    $("#" + resultObject.outerTagID + "_openSubs").mouseover(function()
{
        document.body.style.cursor = "pointer";
    }).mouseout(function(){
        document.body.style.cursor = "auto";
    }).click(function(){
        $("#" + resultObject.outerTagID +
"_subsDiv").slideToggle(200);
        if ($("#" + resultObject.outerTagID +
"_openSubsPic").attr("src") == "_img/action/arrow_right.gif") {
            $("#" + resultObject.outerTagID +
"_openSubsPic").attr("src", "_img/action/arrow_down.gif");
        }
        else {
            $("#" + resultObject.outerTagID +
"_openSubsPic").attr("src", "_img/action/arrow_right.gif");
        }

    });
WORKING CODE:

    //-------------------------------------------------------
    // the openSnippet cell
    //-------------------------------------------------------
    var resultHeaderTableDashOpenSnippet =
resultHeaderTableRow.insertCell(-1);
    resultHeaderTableDashOpenSnippet.style.width = "6%";
    resultHeaderTableDashOpenSnippet.style.textAlign = "center";
    resultHeaderTableDashOpenSnippet.id = this.outerTagID +
"_openSnippet";

    var openSnippetPic = document.createElement("img");
    openSnippetPic.src = "_img/action/open_symbol.gif";
    openSnippetPic.id = this.outerTagID + "_openSnippetPic";
    resultHeaderTableDashOpenSnippet.appendChild(openSnippetPic);

    var resultObject = this;

    $("#" + resultObject.outerTagID +
"_openSnippet").mouseover(function(){
        document.body.style.cursor = "pointer";
    }).mouseout(function(){
        document.body.style.cursor = "auto";
    }).click(function(){
        $("#" + resultObject.outerTagID +
"_snippetDiv").slideToggle(200);
        if ($("#" + resultObject.outerTagID +
"_openSnippetPic").attr("src") == "_img/action/open_symbol.gif") {
            $("#" + resultObject.outerTagID +
"_openSnippetPic").attr("src", "_img/action/close_symbol.gif");
        }
        else {
            $("#" + resultObject.outerTagID +
"_openSnippetPic").attr("src", "_img/action/open_symbol.gif");
        }

    });