jquery click() + load() 不适用于 Opera？答案

【问题标题】：jquery click() + load() doesn't work with Opera?jquery click() + load() 不适用于 Opera？
【发布时间】：2012-04-13 10:00:01
【问题描述】：

我制作了一个 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 而不是将它放在链接上来解决它。

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

【问题讨论】：

你不能用 Number 开始一个 ID 属性值，它是无效的
我通过将 onclick-event 移动到内的 div 而不是将它放在链接上来解决它。

标签： asp.net jquery jquery-click-event

【解决方案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 会导致许多验证错误。

【讨论】：

感谢 RoToRa 的所有提示！我通过将 onclick-event 移动到内的 div 而不是将它放在链接上来解决它。

【解决方案2】：

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

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

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

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

【讨论】：