JS 库在 Ajax 调用后不工作答案

【问题标题】：JS libraries not working after Ajax callJS 库在 Ajax 调用后不工作
【发布时间】：2015-05-13 15:45:40
【问题描述】：

我有一个 Ajax 调用，它返回一些 HTML 代码。在这个返回的代码中，我有几个下拉框使用 select2 JavaScript 库以及许多其他库（公司库、自定义库等）

现在，在从 Ajax 调用检索到的内容中，似乎没有一个库可以正常工作。

可以通过使用 jQuery 委托方法（根据提出的其他问题）解决类似问题的解决方案，但在这种情况下，我不能简单地进入 select2 库（也不能进入所有其他库）和用委托替换一切。

为了使库能够处理返回的 ajax 内容，我可以实施哪些解决方案？

【问题讨论】：

使用委托事件处理程序是修复不起作用的事件的正确方法。您还需要在 AJAX 请求的回调中附加的任何新元素上初始化 Select2 插件。
但是我不能只编辑我拥有的所有外部库并用委托替换所有内容。据我所知，它会破坏其中的许多功能，更不用说更新版本的噩梦了。
我不确定我是否理解您为什么需要修改库？您可以发布您的代码示例。希望这会使问题更清楚。
“在从 Ajax cal 检索到的内容中，似乎没有一个库可以正常工作”您可能必须在新内容上初始化插件。
如果我无法初始化插件，因为这个过程似乎是自动的？

标签： javascript jquery html ajax jquery-select2

【解决方案1】：

如果您通过 AJAX 将 html 加载到页面中，则需要在新的 html 上运行初始化函数：

//from the docs
$('select').select2();

如果你使用 jQuery.load，你可以这样做：

 //load the html into #result
 $( "#result" ).load( "demo.html", function() {
    //now use 'this' in the selection to search the new html and init select2
    $('select',this).select2();
 });

或者，要使用委托，您要等到单击（或自定义事件）之后，然后再次初始化 select2，但我认为在这种情况下您不需要这样做。

【讨论】：