Different Javascript behaviour in different browsers

Question

I'm doing a eCommerce website, but dealing Javascript is killing me.

For example, for the following page, http://nordschleife.metaforix.net/118/118/index.php/sony.html

It works as intended in Google Chrome, but not in IE or Firefox. For instance, clicking the up or down arrow for products that are down the page (e.g., tenth product) will cause the page to go up.

I've already used event.preventDefault(); but it doesn't work for IE and Firefox. The JS is as follows:

<script type="text/javascript"> 
jQuery(document).ready(function($){
  $('#upImg_<?php echo $_product->getId();?>').live("click", function() {
        var textbox = document.getElementById('qty_<?php echo $_product->getId();?>');
        textbox.value = parseInt(textbox.value)+1;
        event.preventDefault();
        });
  $('#downImg_<?php echo $_product->getId();?>').live("click", function() {
          var textbox = document.getElementById('qty_<?php echo $_product->getId();?>');
          if (textbox.value>1)
          textbox.value = parseInt(textbox.value)-1;
          event.preventDefault();
          });
        });
</script>

Answered in this thread http://stackoverflow.com/questions/919013/php-generated-textbox-operation-with-javascript/924623#924623

Thanks for viewing.

Answer 1

The problem is the # in the href - it has a defined behaviour and you need to override it, easiest way being to return false in your click handlers.

Edit: I knew this was a dupe - preventDefault() on an tag