Question

我在下面有一个dynamicpage.js脚本;

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $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;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

$(window).trigger('hashchange');

});

该代码的作用是使链接从href =“/ staff”变为href =“/＃/ staff”以进行动态加载，但只有在<a>标记被包含的情况下才会更改链接一个<nav>标签它只适用于<nav><a href="/staff">staff</a></nav>

我试图在jquery / js中创建它（“#dynamic”）并将{= 1}}标签添加到id {“dynamic”但它不起作用。

我如何制作它以便我可以将{= 1}}标记添加id =“dynamic”，而不是在我希望使用的每个链接周围包裹<a>。

先谢谢。

Answer 1

如果我理解正确，虽然我不确定我...

只是在链接中添加ID将无法执行您想要的操作，因为ID本身对Web浏览器没有任何意义。当用户跟踪链接时，Web浏览器负责执行Stuff，默认情况下，该链接将跟随该链接并加载页面;您正在修改链接地址，以便有趣的东西实际上保存在命名锚点（因此为“＃”），然后依靠JavaScript事件监听器来捕获“点击”事件并做一些新颖的事情。

http://www.w3.org/TR/html401/struct/links.html#h-12.2.1

无需将此侦听器附加到需要特殊处理的每个链接。

通过确保生成HTML使得“有趣”链接具有特定的公共命名类，您至少可以使用等同于document.getElementsByClassName的jQuery，它应该比使用CSS更简单，更快速基于选择器的方法，如示例代码中所示。

http://api.jquery.com/class-selector/

您仍然需要对此进行迭代并添加侦听器。真的值得所有这些JavaScript，CPU开销和浏览器不兼容风险（特别是在移动设备上）只是为了覆盖浏览器已经充分处理的链接的行为吗？你需要做的所有历史修补（无论它是否被框架隐藏）？只是为了避免页面刷新？就个人而言，我真的不确定它是什么！

Answer 2

我会改用事件委托......

它可以附加到要在DOM中链接所在位置触发的文档中（因为点击事件不像mosemove那样泛滥）

然后只需将“动态”类添加到此行为所关注的链接

$(document).on('click', function(e){
    var $t = $(e.target),
        $a = $t.closest('a.dynamic');

    if( $a.length ){
        window.location.hash = $a.attr('href');
        return false;
    }

});

Jquery动态加载链接更改

2 个答案: