通过 AJAX 向 DOM 添加元素后，在 Foundation 6 中重新绑定事件

Question

我有一个带有 Zurb Foundation 6.3 的 rails 应用程序，我在主页上有无限滚动功能，每个元素都有一个 link 显示模式，第一个显示的元素显示模态工作正常，但是当我通过无限滚动功能单击通过 AJAX 加载的元素之一时，没有显示显示模态，它根本不起作用。

我知道我需要重新绑定通过 AJAX 加载的元素中的事件，我以前在 Foundation 5 中通过以下方式这样做：

$(document).foundation({bindings: 'events'});

但是它不适用于 Foundation 6...

Answer 1

此处未显示可处理的代码，但我认为您会了解总体思路。

当您滚动时，项目会附加到某个父元素。您需要找到始终存在的所有已提取项目的父项。

为了示例，父元素将是 #container（如果没有其他公共父元素，则为 document）并且获取的行将具有可点击的 .item那会解雇你 ajax.

您的事件侦听器应采用以下格式：

$('#container').on('click', '.item', function() {
    //whatever it is you do
});

这样，您绑定到 #container，它始终存在，而不是 .item。

无需再做任何事情，无需重新绑定或其他东西

Answer 2

这仅适用于 Foundation 项目，如果您尝试重新绑定不使用 Zurb Foundation 的东西，这将不是问题的解决方案

解决方案：只需将其添加到 AJAX 调用的末尾即可

$(文档).foundation();

Rebinding events in Foundation 6 after add elements to the DOM via AJAX