JS库在Ajax调用后无法工作

Question

我有一个Ajax调用，它返回一些HTML代码。在返回的代码中，我有几个使用select2 JavaScript库的下拉框(公司库、自定义库等)。

现在，似乎没有一个库在从Ajax调用中检索到的内容中起作用。

一个类似问题的解决方案可以通过使用jQuery委托方法来解决(根据其他问题)，但在这种情况下，我不能简单地进入select2库(或者在所有其他库中)并用委托替换所有东西。

为了使库能够在返回的ajax内容上工作，我可以实现什么解决方案？

Answer 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，但我认为在这种情况下不需要这样做。