jQuery code only works in Fx and Chrome

[Snookerman]

Hi, I have been working on a code that is used to keep the score in a snooker game and calculate different things. My early version was working great in all browsers, then I added some features and simplified the code a bit but now it only works in Fx3 and Chrome. I just can't find the problem, I know it's not the css cause I removed it and it still won't work so I'm pretty sure it must be the JavaScript code.

Can anyone please take a look if I used some piece of code that is not supported in IE and Opera or maybe I just made a stupid mistake that only fresh eyes can spot.

Here is the early code that works in all browsers:
Attachment 2369

Here is the "improved" code that only works in Fx3 and Chrome:
Attachment 2370

Thanks for your help!

[jscheuer1]

Your code that you say works in FX 3 and Chrome doesn't. The object console is undefined, and even commenting out that line, the page reloads to # every time I click on something. So I added:

document.onclick = function(e){if (e && e.preventDefault) e.preventDefault(); return false;};

After that it 'worked' (I don't know enough about the game to know if it works properly) in FX, IE, and Opera, at least for fouls.

Code to prevent the default action of the links should be added to each function that gets assigned to them (I think jQuery may have an event.stop directive for that, or something), rather than wholesale as I've done above, which was just for testing purposes (it will also disable any normal links on the page). Or (a better approach) the functions could simply be assigned to something other than anchor link tags.

[Snookerman]

Thanks John, the problem was that I forgot a console.log as you noticed. That is used with Firebug when coding and should be removed of course. I don't encounter any problems after removing that line though, I know that the page reloads to # but it hasn't bothered me, the script works just fine anyways but I could prevent that. In case anyone is interested, this is how it can be done with jQuery:

$('a').click(function(e){
e.preventDefault();
});

The reason why I assigned the functions to anchor tags is that I want the script to work even if the style code is not used, and anchor tags would be the best in that case.

I'm guessing you thought it didn't work because of the rules of the game that don't allow you to press all the buttons always. For example, you have to pot a red ball before you pot one of the other colours. I'll attach the new code and if you want you can try it out and tell me if it works or any type of feedback is appreciated:
Attachment 2374

Thanks!

[jscheuer1]

As long as you're happy. Anyways, after reading your latest post, I did a little research into the jQuery source code. It is as you say about event_object.preventDefault() - however, that's always a dicey proposition for any script library, and I'm a little aghast at jQuery for doing it this way. It is redefining an intrinsic object (preventDefault is already an intrinsic event object property/object in most browsers) - always a risky thing to do. An extreme example would be to redefine document.getElementById, as in:

document.getElementById = function(id){return document.all[id];}

What a nightmare! What happens is that one can no longer use the native javascript object as expected. Although it looks as though the jQuery folks took pains to prevent that from happening in this case, it is a slippery slope once an intrinsic object has been redefined. Its use may change in later browsers, and the jQuery code may get updated carelessly in some way that obliquely references this new redefined object.

It would be far better to create a uniquely named object to handle this task.

But, just to be clear, none of that immediately impacts your original question or your use of the jQuery event.preventDefault() object.

[Snookerman]

It would be far better to create a uniquely named object to handle this task.

Agreed! Just what I was thinking.

Btw, here's what I ended up using:

$('a[href="#"]').click(function(e){
e.preventDefault();
});

That prevents the default action of all anchor tags with the href "#".