Question

IE9 is making the mouseup command in my jQuery to behave strangely. The mousedown command fires but the mouseup command does not. Instead the user has to double click the button to fire the mouseup command. I could just have a click but it would remove the button effect which I like so would prefer to keep it.

jQuery;

$('#voteButton').live('mousedown', function(){

   $(this).replaceWith('<img src="files/images/voting_button_active.png" width="100" height="100" alt="Vote Button" id="voteButton">');


   }).live('mouseup', function(){
   $(this).replaceWith('<img src="files/images/voting_button.png" width="100" height="100" alt="Vote Button" id="voteButton">');
    $('#votePanel').load('template/votePanel.php');




});

Note: The replaceWith on the mouseup command is just there in case the mouseup is cancelled

Answer 1

Setting the html of the element instead of replacing the entire element seems to work a little better:

$('#voteButton').live('mousedown', function(){
    $(this).html('<img src="files/images/voting_button_active.png" width="100" height="100" alt="Vote Button" id="voteButton">');
}).live('mouseup', function(){
    $(this).html('<img src="files/images/voting_button.png" width="100" height="100" alt="Vote Button" id="voteButton">');
    $('#votePanel').load('template/votePanel.php');
});

Obviously, this will require changes to your markup–basically you’d be using a container element and swapping out the inner contents.