JavaScript / jQuery problem on Internet Explorer 7

Question

I have a simple HTML page that looks like this:

...<div id="main">
    <a href="#">Click here!</a>
</div>...

I have a piece of jQuery JavaScript in the header that looks like this:

   <script type="text/javascript">
    $(document).ready(function() {
        DoHello();
    });

    function DoHello()
    {   
        $("div#main a").text("Click here!");
        $("div#main a").attr("onmouseup", "javascript:alert('Hello!');");
    }
</script>

When I click the HTML link in FireFox then I get an alert that says 'Hello!'. Why does this not work in IE7/8?

When I look at the (dynamically) build DOM in IE then I can see the "onmouseup" is present but it is never called. I have tried replacing "onmouseup" with "onclick" - same problem...

Answer 1

Don't use expando events, use jQuery!

$("div#main a").mouseup(function(){ alert('Hello!') });

Answer 2

You shouldn't be using the JavaScript pseudo protocol for anything.

This should work:

function DoHello()
{   
    $("div#main a")
        .text("Click here!")
        .mouseup(function(){
             alert('Hello!');
        });
}

Answer 3

instead of adding the onmouseup event like that why dont you just use the jQuery method like so:

$("div#main a").mouseup(function() {
   alert("hello");
});

should work :) for more info check out - http://docs.jquery.com/Events/mouseup

Answer 4

You should use the bind function like this:

function DoHello(){
$("div#main a").bind("mouseup", function(e){
    alert("Hello!");
});
}