0

写真をクリックしたときにページを div にロードする jQuery/javascript を作成しました。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 に onclick-event を移動することで解決しました。

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

2 に答える 2

1

@Kanishkaが述べたように、IDが数字で始まらない可能性があるという事実に加えて、使用したコードを投稿しませんでした。

次のように関数を呼び出しています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以外のユーザーはどうですか？

もう1つ、HTML5機能を使用しているようですが、XHTMLDoctypeによって多くの検証エラーが発生します。

于 2012-04-13T12:03:50.880 に答える
0

onclick古い属性を使用するのではなく、jQuery 自体を使用してイベント ハンドラーを割り当ててみてください。

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

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

function qp(id) { 
  // ... your function...
}
于 2012-04-13T10:04:17.513 に答える