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

    });