動態頁面/替換內容和jQuery衝突

我已經閱讀了幾篇關於類似主題的文章，但無法剖析並讓我的代碼以我想要的方式運行。動態頁面/替換內容和jQuery衝突

我正在創建一個應用程序，其中頁面內容被更改並動態替換。這是我使用的插件的鏈接（是的，我試圖聯繫編寫腳本的開發人員，但無濟於事）。我試圖在{div id =「guts」}內部實現單獨的jQuery之前，它的所有工作方式都是如此。例如，我試圖添加這個腳本，但它沒有激活。事實上，其他jQuery腳本在這個DIV中不會工作。（digitalbush.com/projects/masked-input-plugin）

似乎存在一些衝突，特別是對於hashchange腳本。我相信這是來源。如果我禁用了hashchange /動態頁面腳本，屏蔽的輸入腳本就像它應該那樣工作。

下面是我正在處理的應用程序的鏈接。這是與激活的散列更改。如果您點擊菜單項，它會根據情況進行更改。但是，屏蔽的輸入不起作用 - 它應該在「電話號碼」輸入字段中激活。 http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/#enter.php

如果您刪除URL中的哈希標記，頁面將加載，並且電話號碼字段中的屏蔽輸入現在可以正常工作，但動態頁面功能已消失。 http://socialbungy.com/newsite/sweeps_temp_facebook/TAB_TEMP1/enter.php

所以我知道這是這個問題，我只是無法弄清楚如何防止衝突。如果您查看/#enter.php的頁面源代碼，則會注意到/index.php的源代碼，而不是/enter.php。它認爲這也是一個因素。這是爲什麼腳本不啓動？

如果你們（和加爾斯？）需要我的代碼發佈在這裏，這將是很多，我會的。想象一下，協助鏈接可能更容易，所以你可以看到結構。

我在做什麼錯？順便說一句，這些網頁可能是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();

}）;

來源

2011-12-29 Mike Barwick

「需要我的代碼發佈在這裏，這將是很多」 - 一個好的第一步是減少代碼。儘量用盡可能少的代碼重現問題。很多時候這會給你帶來解決方案。 – David 2011-12-29 18:37:43

我編輯了我的原始文章以包含可疑的有問題的代碼。但是「很多」代碼，我的意思是應用程序結構。 :) – 2011-12-29 18:41:19

從我們的角度來看（並希望我錯了，有人在撰寫答案時），這個問題現在歸結爲：「這是一段巨大的代碼，有些問題。告訴我什麼是錯的，在哪裏。「你需要做一些調試。例如，在你的「可疑的錯誤代碼」中，爲什麼它被懷疑是壞的？如果你調試到它，那麼它與預期的行爲有什麼不同？一次刪除與問題無關的代碼，直到您縮小問題的範圍。 – David 2011-12-29 18:45:45

我想通了！在某些腳本上仍然有問題，但它有效。我已將評論添加到下面的一部分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 

       }); 
      }); 
    };

來源

2012-01-05 21:06:14

你的jQuery函數可能不適用於某些對象，因爲這些特定的對象在加載函數時不是內容的一部分。

嘗試在其他功能包裝這些功能，例如：

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

並調用reloadAllFunctions（）你使AJAX調用後[.load（）。

來源

2011-12-29 19:06:14 Eric

謝謝，讓我試試這個。在AJAX調用之後，您希望我在哪裏/如何調用reloadAllFunctions（）？ – 2011-12-29 19:22:37

如果輸入掩碼是唯一不起作用的，請嘗試將此代碼放入與pageloaderscript相同的文件中（我相信它是dynamicpage.js）。你可以把它放在任何地方，只要它不在頁面加載器函數中。

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

接下來，添加'reloadMask（）; '在腳本的最後一行，'$（window）.trigger（'hashchange'）;' 。

祝你好運。

來源

2011-12-29 19:33:39 Eric

嗨，埃裏克，感謝您的幫助！非常感謝。它似乎沒有解決這個問題。不知道該從哪裏出發。我更新了原始帖子中的代碼。 – 2011-12-29 21:17:52

動態頁面/替換內容和jQuery衝突

回答

相關問題