jquery setting 'onmouseover' attr doesn't seem to work?

I seem to be unable to change the onmouseover attribute of a div using jquery. In the code below, lines 1 and 3 work fine but line 2 does nothing.

window.parent.$('#note' + appid + dbid).html('<img src="images/note_gray.png">');
window.parent.$('#note' + appid + dbid).attr('onmouseover','testestestsetset');
window.parent.$('#note' + appid + dbid).attr('title', 'testdata');

Using Chrome (13.0.772.0 dev-m) watching the developer tools. I see the two changes immediately as I should, the onmouseover never does anything.

The .net code uses onmouseover to do some weird javascript hover thing. I don't want to go back and change all that functionality, so when I update a record I want it to change the hover tip to reflect the new data, without doing a page postback. This is why I am using onmouseover and trying to change it from jquery so please don't ask "Why don't you use x instead". Thanks.

---EDIT----

If it helps, this is what it looks like in HTML from the generated page that I am 开发者_运维百科building edit functionality for. The original code uses a javascript function called "Tip" to generate a hovertip. This was written by someone else. I am doing edit modals for the page. When you submit a change, I want it to change the tooltip.

<div id="note1009872" class="dbnote" onmouseover="Tip('No Notes...')" onmouseout="UnTip()" title="testempty"><img src="images/note.png"></div>

You're trying to bind an event property to a string. That isn't going to get you far.

You need to bind it to a function, whether it is one that sits in the global namespace or is a closure:

window.parent.$('#note' + appid + dbid).mouseover(function(){testestestsetset()});

Or:

window.parent.$('#note' + appid + dbid).mouseover(testestestsetset);

Ok, turns out that you can bridge across frames like this, but that your execution space must remain in the calling frame unless named:

window.parent.$('#note' + appid + dbid).mouseover(function() {
        window.parent.Tip('Some Tip...')
});

OR:

window.parent.$('#bar').get(0).addEventListener('mouseover',
            function(){window.parent.Tip('Some Tip...')});

I've got sample code working from two iFrames and have tested it out.

If you have access to the actual code behind, why not consider adding the following line in either your Page_Load() method or other such appropriate methods as are available:

myPanel.Attributes.Remove("onmouseover");

This assumes that "myPanel" is the asp:Panel object you have on your page.

jQuery uses the .setAttribute() method to set attribute values, which does not work reliably for getting/setting "traditional" event handlers. To change the traditional event handler, you should do so directly instead of using jQuery:

var noteElem = window.parent.document.getElementById('note' + appid + dbid);
noteElem.innerHTML='<img src="images/note_gray.png">';
noteElem.onmouseover = 'testestestsetset';
noteElem.title = 'testdata';

There is a way to use jQuery to locate the element (or iterate over multiple elements), but jQuery is not of much use in the code snippet you posted.

I would remove the inline onmouseover/onmouseout and use hover() like in this jsFiddle:

window.parent.$('#note' + appid + dbid)
    .html('<img src="images/note_gray.png">')
    .attr("title", "testdata")
    .removeAttr("onmouseover")
    .removeAttr("onmouseout")
    .hover(function() {

         // replaces onmouseover
         Tip("new test");

    }, function() {

         // replaces onmouseout
         UnTip();

    });