Question

我的jQuery .click函数不支持使用ajax加载的内容。我将.click更改为.on（“click”）函数，因为我读到事件委派将解决问题。这是我的ajax电话：

    $(".piece:nth-child(1)").click(function() {
        $.ajax({
            url: "terra.html",
            datatype: "html",
            async: false,
            success: function(data) {
                $("body").fadeOut(function() {
                    $(this).html(data).slideDown(500);
                });
            }
        });
    });

这是在ajax调用之后无效的函数：

$(document).on('click', ".pin", function() {
    $(this).css("z-index", "99");
    $(".dropdown-container").animate({"top": "0px"}, 500, "ease");
    $(".terra-arrow-dropdown").show();
    $(".interact .terra-arrow").fadeOut(300);
    $(".interact .screen").addClass("screen-opacity");
});

Answer 1

返回的lower_bound是否包含html declration？，<!doctype>元素？

是的，它包括所有这些。

在

处覆盖出现<html>元素

body

尝试从$("body").fadeOut(function() { $(this).html(data).slideDown(500); });删除<!doctype>声明，<html>，<body>代码。

如果terra.html元素位于<script>元素中，请将body元素移至原始文档的script，head其中

script

时不要被覆盖

$(document).on('click', ".pin", function() {

调用，替换$(this).html(data)元素的所有html - 包括任何子body元素

Answer 2

检查console.log是否有错误。我的猜测是你的ajax回调函数失败了，因为jQuery的fadeOut的第一个参数是持续时间，第二个参数是回调函数。所以你需要这样的东西。

$(".piece:nth-child(1)").click(function() {
    $.ajax({
        url: "terra.html",
        datatype: "html",
        async: false,
        success: function(data) {
            $("body").fadeOut(500, function() {
                $(this).html(data).slideDown(500);
            });
        }
    });
});

您进行事件委派（$(document).on('click', ".pin", function() {...）的方式应该有效。

jQuery .on函数在ajax调用后无法正常工作

2 个答案: