jQuery click（）+ load（）无法在Opera中使用？

Question

我制作了一个jQuery / javascript，单击图片时将页面加载到div中。 它适用于IE，Firefox，Chrome，但不适用于Opera。。我不知道为什么它不起作用。

请浏览此页面，然后单击产品以查看其如何加载弹出窗口。 http://www.dev.dressmind.com

这是单击的脚本：

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); 
        }
    }); 
}

然后，我有一个看起来像这样的链接：

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

所以，请有人可以快速浏览一下并帮助我解决这个问题。

解决了

我通过将onclick-event移到div中的div中而不是将其放在链接上来解决了。

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

Answer 1

除了ID不能以@Kanishka提到的数字开头的事实之外，您没有在使用代码时发布代码。

您正在这样调用函数： onclick="qp(id)" 。 与其他浏览器不同，Opera（正确地）将id视为未定义的变量。 其他浏览器可能在猜测您实际上是指当前元素的id属性。 您需要改为使用onclick="qp(this.id)" 。

为了摆脱无效的ID并重复onclick处理程序，您应该一次考虑分配事件处理程序。 像这样：

<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>

顺便说一句：非JavaScript用户呢？

还有一件事：您似乎在使用HTML5功能，但是使用XHTML Doctype会导致许多验证错误。

Answer 2

尝试通过jQuery本身分配事件处理程序，而不是使用过时的onclick属性：

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

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

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