0

在我的 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 之类的链接不会触发第一条规则，如果它们在 $('#contentMain') 之后 load()在第一次单击它们时替换了内容。如果在加载 /content 时单击 #contentMain 内的 /contact，则遵守规则，您会看到 console.log() 等。

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

4

2 回答 2

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;   
}});
于 2013-10-29T18:30:21.793 回答
0

根据@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;   
    }
});
于 2013-10-29T18:17:26.910 回答