show hide 仅在 ajax 调用中第一次起作用

Question

我有一个 div 在点击时显示/隐藏，这个 div 将通过 ajax 加载从 me.html 加载内容。我正在添加一个添加到此标签的类类，然后当我再次单击添加了类的标签时，它应该隐藏 div。但这不起作用。

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0) { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html").css("display","block");
        }
        $(".added").click(function() { 
            $(".o1").css("display","none");
        })
    });
});

有什么想法吗？

Answer 1

试试这个。如果对象不存在，这将设置对象。然后，一旦完成，它将切换它以供将来点击。

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0)
        { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html");
        } else if($(this).hasClass("added"))
            $(".o1").hide();
        } else {
            $(".o1").show();
        }
    });
});

将click 处理程序添加到您的代码的所有.added 链接会产生问题，因为您的代码中有。

这显示了正在发生的事情的时间线。希望你能跟上。括号中的数字是事件。相同的数字表示它们同时发生。

(1) #nav a 被点击 then #nav a 得到 added 的类 then .o1 被添加 then任何带有added 类的链接都会获得点击事件

(2) #nav a 被点击 then #nav a 删除 added 的类 then .o1 已经存在 then 任何带有added 类的链接得到一个点击事件（但不是这个链接，但它仍然有之前的点击事件，因为它没有被分离）

(2) .added 也被认为与上述操作同时被点击，因为它是在 (1) 期间附加的

(3) #nav a 被点击 then #nav a 得到 added 的类 then .o1 已经存在 then任何带有added 类的链接都会获得点击事件

(3) .added 也被认为与上述操作同时被点击，因为它是在 (1) 期间附加的

(4) #nav a 被点击 then #nav a 得到 added 的类 then .o1 已经存在 then任何带有added 类的链接都会获得点击事件

(4) .added 也被认为与上述操作同时被点击，因为它是在 (1) 期间附加的 (4) .added 也被认为与上述动作同时被点击，因为它是在 (3) 期间附加的

等等……

要掌握的关键是您没有分离click 事件，而是附加越来越多的事件。

Answer 2

试试这个...

<div class="o1"></div>

$(".o1").hide();

$(function() {

    $("#nav a").click(function() { 

            $(this).toggleClass('added');


            if($(this).hasClass('added') == false){ 

                    $(".o1").load("me.html", function(){$(".o1").show()});

                }

            if($(this).hasClass('added') == true){ 

                    $(".o1").hide();

                })
      });
});