如何在调用 .html() 替换内容后重新初始化我的 jQuery 调用

Question

我有一个页面，在初始加载时会调用各种 jQuery（select2、'onclick' 等）。这是我的 Rails 应用程序中的远程 JS 表单。如果提交失败，我会让页面重新加载表单，以便用户更正验证等。

问题是所有初始 jQuery 调用都不会在重新加载的内容上持续存在（通过 .html() 调用）。

我发现了一些这样的帖子：

Reinitialize jQuery after AJAX call

我已经修复了大多数这样的原始调用，现在可以正常工作了：

$(document).on('keyup', 'input.item_quantity', function(event){
    my code etc...
});

我还有其他类似的问题，我似乎无法解决：

$(function() {
  $('[data-behavior="select2-parent"]').select2({
    ajax: {
      url: 'myurl',
      dataType: 'json'
    }
  });
});

这些都是对文档加载的调用，而不是由于用户交互。当用户单击输入时，我可以进行这些加载，但是在用户单击和 select2 启动之间会有一点延迟。即使我通过 .html() 重新加载内容，我也需要保持这种状态。

在控制台中重新加载后直接调用它：

$('[data-behavior="select2-parent"]').select2();

我将此添加到调用我的 .html() 但 select2 未初始化且没有控制台错误的代码中。

这些 select2 调用如何绑定到初始元素和之后添加的元素？我怀疑我可能在这里遗漏了一些小的或明显的东西。

编辑： select2 AJAX 配置中的 URL 也是基于其他表单输入值的动态。

Answer 1

您只需重新初始化 select2 元素。 .html() 之后的第二次调用不起作用，因为 .select2() 调用期望您的配置传递给它，就像您第一次初始化时所做的那样。它对您的配置没有先验知识，尤其是当您要替换整个.html() 时。我建议将您的配置保存到可以重复使用的变量中。

const select2Config = {
  ajax: {
    url: 'myurl',
    dataType: 'json'
  }
};

$(function() {
  $('[data-behavior="select2-parent"]').select2(select2Config);
});

然后您可以在您的.html() 呼叫之后再次呼叫它。在重新初始化之前，您可能需要destroy the select2 control，这将解除所有事件与其的绑定。如果您有一个动态 URL，您可以简单地覆盖配置的该部分以最大程度地减少代码重复：

/* ... .html() call here ... */

// get new dynamic URL
const myNewAjaxUrl = /* code to get dynamic url */

// destroy previous select2 instance (may be unnecessary)
// then re-initialize w/overridden config 
$('[data-behavior="select2-parent"]')
  .select2('destroy')
  .select2(Object.assign({}, select2Config, {
    ajax: {
      ...select2Config.ajax,
      url: myNewAjaxUrl,
    },
  );
});

您可以查看this answer 以了解我为何调用...select2Config.ajax，以维护您拥有的任何其他AJAX 选项并仅覆盖url 参数。如果您认为它看起来更干净，您也可以单独执行此操作：

const newConfig = Object.assign({}, select2Config);
newConfig.ajax.url = /* code to get dynamic url */

$('[data-behavior="select2-parent"]').select2('destroy').select2(newConfig);