javascript - 试图让 AJAX 样式的 .load() 元素与 .on() 绑定，但它不起作用？

Question

这是我的 JavaScript：

$("#nav a, #residential a, #commercial a, #industrial a").not("#nav-services, #quote").on("click", function() {
    var link = $(this).attr("href");
    link = link.slice(1);
    $("#main-content").fadeOut(500, function() {
        $("#main-content").load('index.php?jQueryLoad=true&url=' + link, function() {
            flexsliderload();
            $("#search-term").keyup(areasearch);
            $("#carousel").show();
            $("#search").show();
        });
        $("#main-content").fadeIn(500);
    });
    return false;
});

数据被动态加载到页面上的<div>调用#main-content中。除了新加载的部分内的链接外，一切正常。他们正在发出标准的 HTTP 请求并在单击时重新加载页面。我想使用.on()绑定它们和所有未来的事件。我究竟做错了什么？

更新：

好的，这确实有效，但是无论如何将代码压缩为一个事件？

$("#nav").not("#nav-services, #quote").on("click", "a", function() {
        var link = $(this).attr("href");
        link = link.slice(1);
        $("#main-content").fadeOut(500, function() {
            $("#main-content").load('index.php?jQueryLoad=true&url=' + link, function() {
                flexsliderload();
                $("#search-term").keyup(areasearch);
                $("#carousel").show();
                $("#search").show();
            });
            $("#main-content").fadeIn(500);
        });
        return false;
    });

    $("#main-content").on("click", "#residential a, #commercial a, #industrial a", function() {
        var link = $(this).attr("href");
        link = link.slice(1);
        $("#main-content").fadeOut(500, function() {
            $("#main-content").load('index.php?jQueryLoad=true&url=' + link, function() {
                flexsliderload();
                $("#search-term").keyup(areasearch);
                $("#carousel").show();
                $("#search").show();
            });
            $("#main-content").fadeIn(500);
        });
        return false;
    });

Answer 1

您需要随时将事件绑定到#main-contentDOM 中存在的容器，而不是将事件直接绑定到锚标签。您可以使用.on()需要将事件委托给选择器的语法重载。

所以改变

 $("#nav a, #residential a, #commercial a, #industrial a").not("#nav-services, #quote").on("click", function() {

至

  $("#main-content").on("click", "#nav a, #residential a, #commercial a, #industrial a", function() {

JS 片段

  $("#main-content").on("click", "#nav a, #residential a, #commercial a, #industrial a", function() {
        var link = $(this).attr("href");
        link = link.slice(1);
        $("#main-content").fadeOut(500, function() {
            $("#main-content").load('index.php?jQueryLoad=true&url=' + link, function() {
                flexsliderload();
                $("#search-term").keyup(areasearch);
                $("#carousel").show();
                $("#search").show();
            });
            $("#main-content").fadeIn(500);
        });
        return false;
    });