动态页面/替换内容和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冲突

回答

相关问题