0

タブのあるこのページがあります。たとえば、タブ1のコンテンツがデフォルトのコンテンツとして読み込まれます。タブ1をクリックすると、次のようなコンテンツが読み込まれます。

 $('.options').load('index.php?viewfile='+filee+' .optionsPane', function(data) {
      //inside here i initialized tinymce because the page has tinymce contents.
}

そのタブ1にはフォームがあります。jsページをすべての機能を含むページにリンクしました。そしてそこに私はこのコードを持っています。

  $(document).ready(function(){
      $('.bottommernuform').submit(function () {
        var idval = $(this).attr('id').toString();
        var idvalarr = idval.split("-");
        var region_name= idvalarr[idvalarr.length-1];
        var publish = $('#regionstate-'+region_name).val();
        var swap = $('#swapregion-'+region_name).val();
        var page_url = $('#page-'+region_name).val();
        $.post("index.php", { publish:publish , swap:swap, region_name:region_name}, 
                            function(data) {
                                //alert(data);

                        });

 return false;
});

これは、ページを完全に読み込んだ後でフォームの送信ボタンをクリックすると完全に機能します。しかし、load（）からコンテンツをロードするタブ1を​​クリックして$('.bottommernuform').submit()も、呼び出されません。ページ全体が更新されます。タブ1をクリックした後、コンテンツをtinymceで保存しようとすると、エラーも発生します。どうすればこれを修正できますか。解決策を教えてください。よろしくお願いします！}）;

4

1 に答える 1

2

ここには2つの考えられる問題があります。まず、でコンテンツを読み込むと.load()トリガーされない$(document).ready()ため$(document).ready()、新しいコードが読み込まれた後は、のコードは実行されません。

次に、次のような静的イベント処理を使用する場合：

$('.bottommernuform').submit(fn)

このイベントハンドラーは'.bottommernuform'、イベントハンドラーが最初にインストールされたときに存在していたオブジェクトに対してのみ動作します。つまり、将来ロードされるコンテンツに対しては動作しなくなります。

コンテンツを動的にロードしていて、以前にインストールしたイベントハンドラーがその新しいコンテンツで機能するようにしたい場合は、次のような委任されたイベント処理を使用する必要があります。

$(staticParentSelector).on('submit', '.bottommernuform', fn);

このjQueryオブジェクトのセレクターは、動的に読み込まれるオブジェクトの静的な親オブジェクトである必要があります（たとえば、コードの実行.bottommernuform時に存在し、すべてのオブジェクトの親であるもの）。最高のパフォーマンスを得るには、動的にロードされない、ターゲットにできるだけ近い親である必要があります。document.ready().bottommernuform

また、送信アクションのデフォルトの動作を防ぐために、return(false)送信イベントハンドラーを使用する必要があることを忘れないでください。

注：.on()v1.7でjQueryに追加されました。v1.7より前のバージョンでは、これを使用できます.delegate()が、引数の順序は異なります。

于 2012-04-19T11:37:27.707 に答える