jquery click() + load() doesn't work with Opera?

Question

I have made a jQuery/javascript that is loading a page into a div when clicking on a picture. It works for IE, Firefox, Chrome but NOT Opera.. I can't figure out why it isn't working..

Please take a look on this page and click on a product to see how it loads a popup window. http://www.dev.dressmind.com

Here is the script for the click:

function qp(id) { 
    $.ajax({
        method: "get",
        url: "QuickProduct.aspx",
        data: "id=" + id,
        //beforeSend: function() { $('#main').hide('slow').fadeOut(); },
        complete: function() { 
            $('#product-area').show('200').fadeIn(); 
            $("#product-area-overlay").show();
            $(".productbox-hover").hide();
        },
        success: function(result) { 
            $('#product-area').html(result); 
        }
    }); 
}

Then I have a link that look like this:

<a href="#" id="123123" onClick="qp(123123);return false;"><div></div</a>

SO please, can someone have a quick look and help me solve this problem.

Solved it

I solved it by moving the onclick-event to the div inside the instead of having it on the link.

< a href="#" id="123123">
    < div **onClick="qp(123123);return false;"**> < /div>
< /a>

Answer 1

Beside the fact that id's may not start with a digit as @Kanishka mentioned, you didn't post the code as you used it.

You are calling your function like this: onclick="qp(id)". And unlike other browsers Opera (correctly) considers id an undefined variable. The other browsers are probably guessing you actually mean the id property of the current element. You need to use onclick="qp(this.id)" instead.

To get rid of the invalid IDs and repeating the onclick handlers, you should consider assignign the event handlers all at once. Something like this:

<a href="#" data-product-id="123456">...</a>
<a href="#" data-product-id="222222">...</a>
<!-- etc. -->

<script>
  jQuery("[data-product-id]").click(function() {
    qp(jQuery(this).data('product-id')); return false;
  });
</script>

BTW: What about non-Javascript users?

One more thing: You seem to using HTML5 features, but an XHTML Doctype leading to many validation errors.

Answer 2

Try assigning your event handlers through jQuery itself, rather than using the outdated onclick attribute:

<a href="#" id="123123" class="example">[image]</a>

$(".example").click(function(e) {
    qp(this.id);
}

function qp(id) { 
  // ... your function...
}