3

サイト フォームの 1 つで、reCAPTCHA の代替としてvouchsafeウィジェットを使用することを検討しています。

ウィジェットは、要素を DOM に挿入します。

<a id="vouchsafe-button" class="" href="javascript:void(0)"> ...
<span id="vouchsafe-button-text-top">Click to Validate</span>

ユーザーが必要なアクション (生成されたグラフィック要素に線を引く) を実行すると、上記の 2 行が次のように変わります。

<a id="vouchsafe-button" class="vouchsafe-path-data-saved" href="javascript:void(0)"> ...
<span id="vouchsafe-button-text-top">Path Data Saved</span>

Vouchsafe 自体には、ウィジェットの PHP の使用法に関するドキュメントがいくつかありますが、クライアント側のチャレンジとレスポンスを処理する JavaScript については何もありません。

この段階でやりたいことは、 のクラスの#vouchsafe-button変更と のテキストの変更を記録することだけです#vouchsafe-button-text-top。とコンソールログに書き込もう$("#vouchsafe-button").attr("class")と$("#vouchsafe-button-text-top").text()しましたが、クラスは次のように報告されundefined、テキストは空の文字列として報告されます

4

1 に答える 1

0

この回答は、質問のタイトル (および @RoryMcCrossan の回答、要素が変更されたときにイベントを発生させることが私の当初の意図であると推測することでした) に対応していますが、質問自体には完全には回答していません。

vouchsafe プラグイン ウィジェットは、多くの要素を DOM に挿入します (私の質問で説明したボタン リンクを含む)。そのうちのいくつかは、ユーザーが必要なアクションを実行したときにコンテンツを変更します。

jQuery.changeイベントは非入力要素と非表示の入力要素では使用できないため、また、ミューテーション イベント用の安定したクロスブラウザ オブザーバがない場合、本当に実行可能な唯一のクロスブラウザ ソリューションは を使用setIntervalして、適切な要素の変更を探すことです。要素（#vouchsafe-chellenge-response最初の選択よりも適切と思われるものを選択しました）。

私の最終的な解決策（.loadメソッドを使用して必要な検証を処理する）は次のとおりです。

watchforchallenge=setInterval(function(){
    resp = $("#vouchsafe-challenge-response");
    if (resp.val()) {
        $("#unbanresponse").load("/forbidden/functions/unban.php",removecaptcha());
        clearInterval(watchforchallenge);
    }
}, 500);

function removecaptcha(){
    $("a#vouchsafe-button").slideUp();
}
于 2013-11-12T15:34:18.693 に答える