3

次のようなフォームがいくつかあります。

<form id=myForm onsubmit="saveFormData(this);return false">
....
</form>

送信すると、カスタム関数が実行され、デフォルト アクション (http を介してデータを送信する) がキャンセルされます。

しかし今、フォームを検証する必要があり、それが正常に検証された場合は、カスタム関数をトリガーします (saveFormDataこの場合、他のフォームでは異なる場合があります)。それ以外の場合は何もしません。

したがって、最終的なイベント ハンドラーは次のように動作する必要があります。

$('#myForm').submit(function(){
    if(formValidatesOk(this))
        saveFormData() ;
    return false ;
}

ただし、HTML コードを変更することはできないため、ハードコーディングされたハンドラーを jquery イベント ハンドラーでラップして、onsubmit イベントを再定義する一般的な方法が必要です。

私の頭に最初に浮かぶのは（未テスト）のようなものです：

var hardcodedHandler = $('#myForm').prop('onsubmit') ; // save the current handler
$('#myForm').prop('onsubmit',null) ; // remove the current handler
$('#myForm').submit(function(){
    if(formValidatesOk(this)) // if the form is valid then...
        Function(hardcodedHandler).call(this) ; // trigger the original handler
    return false ;
}) ;

しかし、それはあまりエレガントではありません (控えめに言っても)。

それを行うより良い方法を知っていますか？

4

2 に答える 2

4

要素のプロパティから古い関数を取得するだけで済みonsubmitます。必要はありませんeval。

var form = $('#myForm');
var oldHandler = form.prop("onsubmit");
form.removeProp("onsubmit").submit(function(e){
    e.preventDefault();
    if(formValidatesOk(this))
        oldHandler.call(this, e);
});

jsfiddle.net のデモ

于 2012-12-20T07:01:47.207 に答える
0

イベントは予測不可能です (イベントが発生する方法において)。それらにバインドされているハンドラーも、順序に依存してはならないと思います。したがって、以前に追加されたハンドラーを変更するイベントにハンドラーをバインドすることは、確かに (非常に) 悪い習慣です。実際、あなたが示唆したように、どのハンドラーが最初にトリガーされるかは決してわかりません。結局のところ、イベントは互いに通知されるべきではありません。コードの高度な結合を避けるために、イベントとハンドラーを使用する必要があります。

この問題に取り組む最善の方法 (制約を考慮に入れて) は、「古い」ハンドラーを新しい動作で装飾することです。Bergi がこれの良い例を投稿しました。

于 2012-12-20T07:12:24.307 に答える