Question

我有两个相同代码的版本。第一个版本效果很好，但不适用于新加载的内容。

    // Do some fancy ajax loading and URL rewriting when link is clicked

    var linkButton = $(".jsHistory a");

    linkButton.on("click", function() {
        // If link is already selected do nothing
        if($(this).parent().hasClass("selected")) {
            return false;
        // Else load new content and update URL
        } else {
            linky = $(this).attr("href");
            history.pushState(null, null, linky);
            showActiveLink();
            loadContent(linky);
            return false;
        }
    });

在第二个版本中，我需要将所有内容与特定的linkButton相关联，我认为它会起作用。我正在努力通过选择器。

    // Do some fancy ajax loading and URL rewriting when link is clicked

    var linkButton = $(".jsHistory a");

    $(document).on({
        click: function() {
            If link is already selected do nothing
            if($(this).parent().hasClass("selected")) {
                return false;
            // Else load new content and update URL
            } else {
                linky = $(this).attr("href");
                history.pushState(null, null, linky);
                showActiveLink();
                loadContent(linky);
                return false;
            }
        }
    }, linkButton);

有没有人知道如何实现这一目标，如果我接近，我认为要做到这一点？谢谢你的时间。

Answer 1

几乎就在那里。你需要在文档中为新创建的元素调用它，就像在第二个元素中一样，但是你也应该将选择器传递给on函数。这样，只接收来自该选择器的事件，并且“this”元素将成为链接......

$(document).on('click', '.jsHistory a', function(){
    var linkButton = $(this);
    //...
});

Answer 2

似乎on()只接受委托事件处理程序的字符串，而不是jQuery对象，所以你必须这样做：

$(document).on({
    click: function() {
        if( !$(this).parent().hasClass("selected") ) {
            var linky = $(this).attr("href");
            history.pushState(null, null, linky);
            showActiveLink();
            loadContent(linky);
        }
        return false;
    }
}, '.jsHistory a');

FIDDLE

如何将特定的.on选择器传递给函数

2 个答案: