1

以下のコードの変更イベントでJavaScriptをjQueryで上書きしようとしていますが、インラインJavaScriptが宣言されたjQuery機能よりも優先されていると思います。基本的に、追加のJavaScriptファイルを含むAJAXバージョンのサイトを作成しようとしています。追加のAJAXバージョンがなくてもこの機能を使用するにはこの機能が必要ですが、メインのJavaScriptファイルに含めるか、現在のようにインラインのままにするかがわかりません。それらに関する提案や情報をいただければ幸いです。ありがとう！

<form action="/cityhall/villages/" method="post" name="submit_village">
    <select name="village" onchange="document.submit_village.submit();">
        <option value=""></option>
    </select>
</form>

jQueryフォームプラグインを使用して投稿をPHPに送信し、次のようにリクエストを処理しようとしています。

var bank_load_options = { 
    target:        '#content',
    beforeSubmit:  showRequest,
    success:       showResponse
};
$('form.get_pages').livequery(function(){
    $(this).ajaxForm(bank_load_options);
    return false;
});

次のようにコードを変更しました。

<form action="/cityhall/villages/" method="post" id="submit_village" name="submit_village">
    <select name="village" class="get_pages" rel="submit_village">
        <option value=""></option>
    </select>
</form>

<script>
# main JavaScript
$('.get_pages').live('change',function(e){
    var submit_page = $(this).attr('rel');
    $("#"+submit_page).submit();
});

# ajax JavaScript
var bank_load_options = { 
    target:        '#content',
    beforeSubmit:  showRequest,
    success:       showResponse
};
$('.get_pages').live('change',function(){
    var submit_page = $(this).attr('rel');
    $("#"+submit_page).ajaxForm(get_pages_load_options);
    return false;
});
</script>

ただし、変更した場合にのみ、他のすべてのオプションが実行されるようになりました。

4

4 に答える 4

3

非 ajax バージョンも非 jQuery である必要がありますか? そうでない場合は、(@nnnnnn が行ったように) onxyz 属性を廃止し、全体で jQuery を使用することもお勧めします。

他の投稿者が示唆しているように、インライン イベントはお勧めできず、廃止する必要があります。

ajax 以外のバージョンで onxyz を使用する必要がある場合は、次のことをお勧めします。

このバージョンが ajax であるかどうかを格納する変数を設定します (これを決定する方法は、あなたとアプリのコンテキスト次第です)。

var is_ajax = true;

それが ajax バージョンの場合は、これを試してください。

$(function(){
    if(is_ajax){     
        //Unbind the change event from the village select box
        $('select[name="village"]').unbind('change');
        //As an extra measure, remove the onchange attribute
        $('select[name="village"]').removeAttr('onchange');
        //Re-bind the click event to execute your new ajax functionality
        $(document).on('change','select[name="village"]',function(){
            //Do ajax stuff for on-change event here
        });
    }
});

これは jQuery の document.ready 関数にあるため、このコードは、html dom (および関連する onchange 属性) がレンダリングされた後に起動する必要があります。したがって、古いイベントを効果的に取り除き、新しいイベントを再バインドすると思います。

デモ：

http://jsfiddle.net/foxwisp/hdL5R/

インライン イベントを廃止できる場合は、最初の JavaScript ファイルでこれを実行することをお勧めします。

$(document).on('change','select[name="village"]',function(){
    document.submit_village.submit();
});

そして、後で含める ajax ファイルの次の内容:

$('select[name="village"]').removeAttr('onchange');
$(document).on('change','select[name="village"]',function(){
    //Do ajax stuff here
});

両方が同じスコープと時間枠内にあり、次々に実行される限り、上記は機能するはずです。

于 2012-06-05T02:51:49.343 に答える
1

すべての Javascript を 1 つの場所 (具体的には 1 つのファイルではなく、半分インライン、半分ファイルではなく) に配置することをお勧めします。そのため、すべてのインライン Javascript を削除します。

同じ場所からすべてを管理できるため、これは優先度の問題にも役立ちます。

于 2012-06-05T02:43:24.773 に答える
0

JavaScriptを配置する場所は、（主に）スタイルの選択です。CSSと同じように、JavaScriptをページソース（インライン）またはページヘッドに配置することは、最初にページを作成するための良い習慣ですが、本番ページには悪い習慣です。

そうは言っても、なぜあなたがonchangeイベントを2倍にするのかについて私は少し混乱しています。select要素にもjQueryを使用しようとしていますか？

インラインと個別のJavaScriptの一般的な動作はわかりませんが、インラインCSSと同様に、ページ内のJavaScriptが外部ファイルよりも優先されると思います。

于 2012-06-05T02:41:04.333 に答える
0

この特定のケースでは、AJAX バージョンで、トリガーされた送信を差し控えることができます。

$('[name=submit_village]').on('submit', function(e) {
  e.preventDefault();

  //...Maybe other AJAX code...
});
于 2012-06-05T02:45:28.207 に答える