Question

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

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

在我尝试在{div id =“guts”}中实现单独的jQuery之前，它一切正常。例如，我正在尝试添加此脚本，但它没有激活。事实上，没有其他jQuery脚本可以在这个DIV中工作。（digitalbush.com/projects/masked-input-plugin）

似乎存在一些冲突，特别是对于hashchange脚本。我相信这是源头。如果我禁用hashchange / dynamic页面脚本，则屏蔽的输入脚本就像它应该的那样工作。

这是我正在处理的应用程序的链接。这是激活哈希更改。如果单击菜单项，它将按预期更改。但是，屏蔽输入不起作用 - 它应该在“电话号码”输入字段上激活。 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();

}）;

Answer 1

您的jQuery函数可能无法在某些对象上运行，因为在加载函数时，这些特定对象不是内容的一部分。

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

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

在进行AJAX调用[.load（）]之后调用reloadAllFunctions（）。

Answer 2

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

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

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

祝你好运。

Answer 3

我想通了!!在某些脚本上还有bug，但它确实有效。我在下面的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

                });
            });
    };

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

3 个答案: