web-dev-qa-db-ja.com

Firefoxで壊れたjQuery / CSS-ColorBoxとreCAPTCHA

私は、基本的な問い合わせフォームと思われるものに取り組んでいます。 jQueryのColorBoxプラグインを使用して、画像リンクを含むフォームを作成します。これにより、reCAPTCHAフォームとフォームの送信ボタンを含むColorBoxが開きます。

このコードはIE7で完全に機能し、IE6でもある程度機能しますが、FirefoxではOperaおよびChromeで送信ボタンをクリックすると、ページ全体が削除されます実際のリンクを通過していた場合。

私はどこかで本当に愚かな間違いを犯していると確信しているので、誰かが私のコードを簡単に見て、どこが間違っているのかを見ることができますか？この問題は、しばらくの間私を悩ませており、他の多くのもので私の進行を止めています。

EDIT：ばかげた！ URLを含めていないことに気付きました！これが、私がIRCで伝えてきた短縮版です...

http://is.Gd/f3M2s

EDIT 2：ColorBoxを開くと、ソースの表示によると、次のコードが「表示」されます。

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha.js"></script><div id="recaptcha_widget_div" style="display:none"></div><script>Recaptcha.widget = Recaptcha.$("recaptcha_widget_div"); Recaptcha.challenge_callback();</script><div id="recaptcha_widget_div" style="display:none"></div><script>Recaptcha.widget = Recaptcha.$("recaptcha_widget_div"); Recaptcha.challenge_callback();</script>
cssjquerycross-browserfirefoxgoogle-chrome
2
Mike B

ReCAPTCHAにPHPプラグインを使用している場合、これは比較的一般的な問題であることがわかります。サーバー側の部分にプラグインコードを使用することにしましたが、指定されたJavaScriptを使用してreCAPTCHAフォームを手動でビルドすると、完全に正常に動作します。

0
Mike B

送信ボタンを送信タイプからタイプボタンに変更すると、フォームが送信されなくなります。

http://jsfiddle.net/tfcuA/

送信ボタンをクリックした場合、falseを返すかjQueryのpreventDefaultを使用して、デフォルトの送信動作を「ジャム」する必要があります。

それ以外の場合は、フォーム上のonsubmitからキャプチャを処理するCaptchaがあります。

2
Metalshark

次のようなものを追加することで、クリックの通常のイベントを停止できます。

$("#linkButtonId").click( function (event){
 event.preventDefault(); event.stopPropagation();
 // things that should happen in this function on click
});

preventDefaultとstopPropagationの詳細については、こちらをご覧ください here

これにより、フォームの送信や、私の例ではリンクのクリックが防止されます。

0
user1961

JSを少し整えて1つのドキュメントに整え、関数showHeaderが定義されている場所を、呼び出される前に移動します。

ただし、主な問題は、キャプチャdiv内にキャプチャコンテンツをロードするGoogleからのスクリプトがあるという事実に起因していると思います。 Colorboxと動的に追加されたコンテンツ（その場合はビデオ）で過去に似たようなものを見てきました。

解決策は、#recaptcha divの内容を個別のファイルに分割し、ColorboxにDOM onclickに注入させることです。

$("a.captcha").colorbox({
    width: "30%",
    href: "recaptcha.html" //or .php or whatever
});

編集：Metalsharkが提供するJSFiddle（jsfiddleの+1-優れたリソース）を編集して、jQueryが正常に機能することを示しました： http： //jsfiddle.net/tfcuA/13/ >このリビジョンは、recaptchaを他の場所から動的にロードされないいくつかのテストコンテンツに置き換えるだけで動作し、分離ソリューションも同様に機能する必要があることを示唆しています。

0
bcmcfc