动态页面/替换内容和jQuery冲突答案

【问题标题】：Dynamic page/replace content and jQuery conflict动态页面/替换内容和jQuery冲突
【发布时间】：2012-01-06 05:06:14
【问题描述】：

我已经阅读了几篇关于类似主题的 SO 帖子，但无法剖析并让我的代码也按照我想要的方式运行。

我正在创建一个页面内容动态更改和替换的应用程序。这是我使用的插件的链接（是的，我尝试联系编写脚本的开发人员，但无济于事）。 (css-tricks.com/dynamic-page-replacing-content)

在我尝试在 {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();

});

【问题讨论】：

“需要我的代码张贴在这里，这会很多” - 一个好的第一步是减少代码。尝试用尽可能少的代码重现问题。很多时候，这会给您带来解决方案。
我编辑了我的原始帖子以包含可疑的有问题的代码。但是“很多”代码，我的意思是应用程序结构。 :)
从我们的角度来看，问题是（希望我错了，有人正在撰写我们所说的答案），这个问题目前归结为：“这是一堵巨大的代码墙。有些东西错了。请告诉我哪里出了问题。你需要做一些调试。例如，在您的“怀疑错误代码”中，为什么它被怀疑是错误的？如果你调试它，它在哪里偏离预期的行为？在缩小问题范围之前，一次删除与问题无关的代码。
我已经调试过了，发布的脚本肯定是问题所在。正如你所建议的，我已经尝试过调试代码，但我不是 jQuery 专家。因此需要帮助......
在这里发帖肯定是最后的手段。我是一个狂热的学习者，总是喜欢自己解决问题并找出问题，以防止将来出现问题等。我向你保证，我并不是在寻找一个简单的出路，就像许多人来这里寻找的那样。

标签： jquery html ajax dynamic

【解决方案1】：

您的 jQuery 函数可能不适用于某些对象，因为在加载函数时，这些特定对象不是内容的一部分。

尝试将这些函数包装在另一个函数中，例如：

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

在您进行 AJAX 调用 [ .load() ] 之后调用 reloadAllFunctions()。

【讨论】：

谢谢，让我试试这个。在 AJAX 调用之后，您希望我在哪里/如何调用 reloadAllFunctions()？

【解决方案2】：

如果输入掩码是唯一不起作用的东西，请尝试将此代码放在与您的 pageloaderscript 相同的文件中（我相信它是 dynamicpage.js）。你可以把它放在任何地方，只要它不在 pageloader-function 中。

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

接下来，添加 'reloadMask(); ' 在脚本的最后一行，在 '$(window).trigger('hashchange');' 之后.

祝你好运。

【讨论】：

您好，埃里克，感谢您的帮助！非常感谢。它似乎没有解决这个问题。不知道从这里去哪里。我已经更新了我原来帖子中的代码。

【解决方案3】：

我想通了！！在某些脚本上仍然存在错误，但它可以工作。我在下面的 dynamicpage.js 脚本的一部分中添加了 cmets。在那里输入您的新脚本，它会在内容加载时重新触发它们。

$(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

                });
            });
    };

【讨论】：