javascript - Ajax 调用后 JS 库不工作

Question

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

现在，在从 Ajax 调用检索的内容中，所有库似乎都不起作用。

可以通过使用 jQuery 委托(delegate)方法(根据提出的其他问题)来解决类似问题的解决方案，但在这种情况下，我不能简单地进入 select2 库(也不能在所有其他库中)并且用委托(delegate)替换所有内容。

为了使库能够处理返回的 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();
 });

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