在调用 .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().[=19= 重新加载内容，我也需要它持续存在]

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

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

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

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

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

Answer 1

您只需 re-initialize 选择 2 个元素。 .html() 之后的第二次调用不起作用，因为 .select2() 调用期望您的配置像您第一次初始化时那样传递给它。它事先不知道您的配置，尤其是当您要替换整个 .html() 时。我建议将您的配置保存到可以是 re-used.

的变量中

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

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

然后您可以在 .html() 调用后再次调用它。您可能必须在 re-initializing 之前 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,
    },
  );
});

您可以查看了解我调用 ...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);

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

How do I reinitialize my jQuery calls after calling .html() to replace content

javascript

jquery

jquery-select2