ページの内容がload（）によってロードされた後、ページがJquery関数を呼び出さない

Question

このページにはタブがあります。たとえば、タブ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に内容を保存しようとすると、エラーが発生します。どのように私はこれを修正することができます。私に解決策を教えてください。大いに助けてください！ }）;

Answer 1

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

第二に、あなたのようなハンドリング静的なイベントを使用します。

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

このイベントハンドラは唯一のイベントハンドラが最初にインストールされた時点で存在'.bottommernuform'オブジェクトに対して操作になります。これは、将来ロードされるコンテンツに対しては動作しないことを意味します。

あなたがdynammicallyコンテンツをロードしていて、その新しいコンテンツで動作するように、以前にインストールし、イベントハンドラをしたい場合、あなたはこのように扱う委任イベントを使用する必要があります。

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

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

また、送信アクションのデフォルト動作を防止するには、送信イベントハンドラのreturn(false)を使用する必要があります。

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