動的なページ/コンテンツとjQueryの競合を置き換えます

Question

私は同様の主題に関してはSOに関するいくつかの記事を読んでいますが、私が望むように機能するようにコードを解読して取得することはできませんでした。

ページコンテンツが変更され、動的に置き換えられるアプリケーションを作成しています。これは私が使用したプラグインへのリンクです（はい、スクリプトをプログラミングした開発者に連絡してみましたが、無駄にしていました）。 （css-tricks.com/dynamic-page-replacing-content）

{div id = "guts"}内に別のjQueryを実装しようとするまでは、それはすべての方法で動作します。たとえば、このスクリプトを追加しようとしていますが、起動していません。実際、このDIVでは他のjQueryスクリプトは動作しません。 （digitalbush.com/projects/masked-input-plugin）

特になhashchangeスクリプトを使って、いくつかの競合があるように見えます。私はこれが源だと信じています。ハッシュチェンジ/ダイナミックページスクリプトを無効にすると、マスクされた入力スクリプトは正常に動作します。

私が取り組んでいるアプリケーションへのリンクです。これは、ハッシュ変更を有効にした状態です。そして、メニュー項目をクリックすると、それは必要に応じて変更されます。ただし、マスクされた入力は機能しません。「電話番号」入力フィールドで有効になります。あなたがURLにハッシュマークを削除した場合 http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/#enter.php

は、ページがロードされ、電話番号フィールド上のマスクされた入力は今しかし、動的ページの機能がなくなって、それが必要として動作します。 http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/enter.php

私はこれが問題であることを知っているので、私は紛争を防ぐ方法を理解できません。 /#enter.phpのページソースを見ると、/enter.phpではなく/index.phpのソースコードがわかります。これも要因だと思います。これがスクリプトが開始しない理由ですか？

私のコードがここに掲載されている必要があります（これはたくさんあります）。リンクを手助けする方が簡単かもしれないので、構造を見ることができます。

私は間違っていますか？ Btw、ページはPHPかもしれませんが、そこにPHPコードはありません。

編集： ここには疑わしいコードがあります。

$(function() { 
var reloadMask = function reloadMask() { 
    $(document).ready(function() { 
     $("#phone").mask("(999) 999-9999"); 
    }); 
} 
var newHash  = "", 
    $mainContent = $("#appContent"), 
    $pageWrap = $("#page-wrap"), 
    baseHeight = 0, 
    $el;   
$pageWrap.height($pageWrap.height()); 
baseHeight = $pageWrap.height() - $mainContent.height();  
    $("nav").delegate("a", "click", function() { 
     window.location.hash = $(this).attr("href"); 
     return false; 
    }); 
    $("#buttonWrap").delegate("a", "click", function() { 
     window.location.hash = $(this).attr("href"); 
     return false; 
    });  
$(window).bind('hashchange', function(){  
    newHash = window.location.hash.substring(1);   
    if (newHash) { 
     $mainContent 
      .find("#guts") 
      .slideToggle(500, function() { 
       $mainContent.hide().load(newHash + " #guts", function() { 
        $mainContent.slideToggle(500, function() { 
         $pageWrap.animate({ 
          height: baseHeight + $mainContent.height() + "px" 
         }); 
        }); 
        $("nav a").removeClass("current"); 
        $("nav a[href="+newHash+"]").addClass("current");      
       }); 
      }); 
    };   
});  
$(window).trigger('hashchange'); 
reloadMask(); 

}）;

Answer 1

私はそれを理解しました！まだいくつかのスクリプトでバグがありますが、動作します。以下のdynamicpage.jsスクリプトの一部にコメントを追加しました。そこに新しいスクリプトを入力すれば、コンテンツの読み込み時に再起動します。

$(window).bind('hashchange', function(){  
    newHash = window.location.hash.substring(1);   
    if (newHash) { 
     $mainContent 
      .find("#guts") 
      .slideToggle(500, function() { 
       $mainContent.hide().load(newHash + " #guts", function() { 
        $mainContent.slideToggle(500, function() { 
         $pageWrap.animate({ 
          height: baseHeight + $mainContent.height() + "px" 
         }); 
        }); 
        $("nav a").removeClass("current"); 
        $("nav a[href="+newHash+"]").addClass("current"); 

        //RE-FIRE OTHER SCRIPTS HERE 

       }); 
      }); 
    }; 

Answer 2

jQuery関数は、関数がロードされたときに、この特定のオブジェクトがコンテンツの一部ではなかったため、おそらく一部のオブジェクトでは機能しません。例えば、別の関数で、これらの機能をラップ

試してください：あなたはAJAX呼び出し行った後

var reloadAllFunctions = function reload() { 
// all the important functions 
} 

そしてreloadAllFunctions（）を呼び出し、[.LOADを（）]。

Answer 3

入力マスクがうまくいかない場合は、このコードをpageloaderscriptと同じファイルに入れてみてください（私はdynamicpage.jsだと思います）。 pageloader-functionにない限り、どこにでも置くことができます。

var reloadMask = function reloadMask() { 
    $(document).ready(function() { 
     $("#phone").mask("(999) 999-9999"); 
    }); 
} 

次に、 'reloadMask（）;を追加します。 'の後にスクリプトの最後の行に' $（window）.trigger（ 'hashchange'）; 。

幸運。