javascript - 如何修复 JavaScript 插件仅适用于每隔一个部分页面 ajax 加载

Question

我的问题是 bootstrap toggle 插件只能每隔一段时间工作一次。

我正在使用 bootstrap-toggle 为我的复选框提供更好的样式。

<link href="~/Content/bootstrap-toggle.min.css" rel="stylesheet">
<script src="~/Scripts/bootstrap-toggle.min.js"></script>

我在调用 ajax 时返回的部分 View 中使用这些。

这是我的实现示例:

@Html.EditorFor(model => model.Active, "", new { htmlAttributes = new { @id = "Active", data_toggle = "toggle", data_width = "100%", data_on = "Active", data_off = "Disabled" }})

在第一次加载 View 时，当我单击切换按钮时，它会切换到另一个值。如果我在不刷新页面的情况下关闭 View 已加载的窗口，重新打开窗口并单击切换按钮，则没有任何反应。

编辑:我还应该提到，如果我再次关闭 View 已加载的窗口而不刷新页面，请重新打开窗口并单击它起作用的切换按钮。问题不在于它只适用于初始负载，而是它在 50% 的时间内都在工作。

Answer 1

发生这种情况是因为脚本在您网页的元素上只设置了一次，在页面加载后立即发生。之后，无论何时加载新的 DOM 元素(例如通过 AJAX 重新加载局部 View 时发生的情况)，脚本都不会在新加载的元素中执行其设置例程。

通过 AJAX 加载新元素后，您应该对新加载的元素执行对 bootstrapToggle() 的 JavaScript 调用( checkout Bootstrap Toggle's API )，以便可以激活 Bootstrap Toggle 插件新加载的元素。

您应该在页面上加载新的 AJAX 元素后立即调用类似这样的方法:

// Replace by a selector which selects the elements which have been created
$('#myNewLoadedCheckboxElement').bootstrapToggle();