试图获得一个AJAX风格的.load()元素与.on()绑定，但它不工作

Trying to get an AJAX style .load() element to bind with .on() but it's not working?

本文关键字：绑定 元素 on 工作 load 风格 AJAX 一个      更新时间：2023-09-26

这是我的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;
});

数据被动态加载到页面上称为#main-content的<div>中。除了新加载的部分中的链接外，一切正常。它们发出标准的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;
    });

您需要随时将事件绑定到存在于DOM中的容器#main-content，而不是将事件直接绑定到锚标记。您可以使用.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;
    });
相关文章：