如何使pushState / onpopstate和jQuery事件（例如点击）很好地工作？

Question

我能够成功使用pushState和onpopstate来使用支持AJAX的页面上的后退/前进按钮。

AJAX功能的一个方面是在点击链接时自动刷新下拉列表。这是我的代码这个功能。

<a class="type" href="#Chr(35)#" data-type="B">B</a>
| <a class="type" href="#Chr(35)#" data-type="H">H</a>

window.addEventListener("popstate", function(event) {
    if (event.state) {
        document.getElementById("content").innerHTML = event.state.html;
    }
});

$(".type").on("click", function (event) {
    console.log("im here");

    event.preventDefault();

    getCourses({ type:$(this).data("type") });

    try {
        window.history.pushState({ "html": document.getElementById("content").innerHTML }, "", globalvars.baseurl+"/my/main?type="+$(this).data("type"));
    } catch(exception) {
    }
});

当我按下后退按钮并呈现内容部分的已保存副本时，会出现问题。当我尝试点击上面的链接时，它不会触发（即＆＃34;我在这里＆＃34;现在在我按下后退按钮之前在我的控制台中显示它已经工作了<） / p>

似乎解决方案是在我的事件监听器中复制链接的点击功能，特别是在＆＃34; if（event.state）...＆＃34;。

window.addEventListener("popstate", function(event) {
    if (event.state) {
        document.getElementById("content").innerHTML = event.state.html;

        $(".type").on("click", function (event) { console.log("im here") });
    }
});

$(".type").on("click", function (event) {
    console.log("im here");

    event.preventDefault();

    getCourses({ type:$(this).data("type") });

    try {
        window.history.pushState({ "html": document.getElementById("content").innerHTML }, "", globalvars.baseurl+"/my/main?type="+$(this).data("type"));
    } catch(exception) {
    }
});

这意味着我需要在2个地方编写相同的代码。我能想到的唯一选择是删除点击功能的内容并将其放在自定义函数中。

window.addEventListener("popstate", function(event) {
    if (event.state) {
        document.getElementById("content").innerHTML = event.state.html;

        $(".type").on("click", function (event) { test($(this).data("type")); });
    }
});

$(".type").on("click", function (event) { test($(this).data("type")); });

function test(type) {
    console.log("im here");

    event.preventDefault();

    getCourses({ type:type });

    try {
        window.history.pushState({ "html": document.getElementById("content").innerHTML }, "", globalvars.baseurl+"/my/main?type="+type);
    } catch(exception) {
    }
}

还有其他办法吗？

非常感谢

Answer 1

几种方式......一种是将内部函数存储在变量中：

var typeClickHandler = function (event) {
  test($(this).data("type"));
};

然后在需要时使用该处理程序，在两个地方：

$(".type").on("click", typeClickHandler);

其他方式是使用事件委托...这意味着侦听器位于您要侦听的此元素的文档或某个父级上：

$(document).on('click', '.type', function (event) {
  // note that we use event.target instead of this here
  test($(event.target).data("type"));
});

当然，您可以将这两种解决方案结合起来：

var typeClickHandler = function (event) {
  test($(event.target).data("type"));
};
$(document).on('click', '.type', typeClickHandler);