Question

在我的main.js中，我有两个与链接相关的规则。应该处理所有不以http：//，mailto：或＃开头的链接。它使用load（）替换$（'＃contentMain'）中的内容。另一个处理以http：//开头的链接，并在新选项卡中打开它们。

$("a:not([href^='http://'],[href^='#'],[href^='mailto:'])").click( function(e) { 
    console.log('Caught click, loading via AJAX');
    var url = $(this).attr("href");
    var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
    e.preventDefault(); 
    if(url!=window.location){
       window.history.pushState({path:url},title,url);
       $('#contentMain').load(url);
        document.title = "It's New Orleans" + title;   
    }
});

$("a[href^='http://']").attr("target","_blank");

问题似乎是像/ contact这样的链接在load（）替换第一个内容之后不会触发第一个规则 IF 它们在$（'＃contentMain'）中他们被点击的时间。如果在加载/ content时在#contentMain内单击/联系，则遵循规则，您会看到console.log（）等。

那么，为什么替换为load（）的内容不遵守main.js中的规则？这些规则目前在$(document).ready(function(){内，但我也尝试删除它以查看它是否有帮助

Answer 1

您可以使用.on()处理程序，如下所示：

$("body" ).on( "click", "a:not([href^='http://'],[href^='#'],[href^='mailto:'])",function(e) { 
console.log('Caught click, loading via AJAX');
var url = $(this).attr("href");
var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
e.preventDefault(); 
if(url!=window.location){
   window.history.pushState({path:url},title,url);
   $('#contentMain').load(url);
    document.title = "It's New Orleans" + title;   
}});

Answer 2

Per @ KevinB的评论答案正在替换为

$("body").delegate("a:not([href^='http://'],[href^='#'],[href^='mailto:'])", "click", function(e) { 
    console.log('Caught click, loading via AJAX');
    var url = $(this).attr("href");
    var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
    e.preventDefault(); 
    if(url!=window.location){
       window.history.pushState({path:url},title,url);
       $('#contentMain').load(url);
        document.title = "It's New Orleans" + title;   
    }
});

调试jQuery load（）用于替换为load（）的内容中的链接

2 个答案: