javascript - ajax刷新div后SlideToggle不起作用

Question

现在我已经设置了slideToggle 函数，它运行良好。但在我过滤结果后，幻灯片不再起作用了。在此页面上您可以看到它:https://staging.therapeutischefrauenmassage.de/therapeutinnen/
通过单击单选按钮过滤结果后，幻灯片根本不会滑动。有什么问题吗？该代码将毫无用处，因为 ajax 会加载该文件，该文件之前已包含并有效...

Answer 1

一旦 ajax 加载该部分，您可能需要重新附加事件监听器(例如 on(click,...) 等)。由于它们是 DOM 的新手，因此不会附加这些监听器。

您可以在 ajax 加载末尾添加一个步骤，用于分离并重新附加相关监听器。

<小时/>

后续:

这是您当前的代码:

$('.show').click(function() {
    $(this).closest('h3').next('.slidetoggle').slideToggle();
});

执行此操作可以清除任何剩余的链接事件处理程序(因为我们稍后会将它们添加回来):

$('.show').off();

然后我会以这种方式重做点击处理程序(我更喜欢使用“on”语法，因为它与“off”配合得很好):

$('.show').on('click', function() {
    $(this).closest('h3').next('.slidetoggle').slideToggle();
});

您可以将两者都插入一个函数中，如下所示:

function relinkEvents() {
    $('.show').off();
    $('.show').on('click', function() {
        $(this).closest('h3').next('.slidetoggle').slideToggle();
    });
}