Javascript 调用.html（）替换内容后，如何重新初始化jQuery调用

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

问题是所有初始jQuery调用都不会在重新加载的内容上持久（通过

.html（）

调用）

我发现了一些类似的帖子：

我已经修复了大多数像这样的原始调用，现在效果很好：

$(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();

我将其添加到调用my

.html（）

的代码中，但是select2没有初始化，也没有控制台错误

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

---

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

您只需重新初始化select2元素即可。在

.html（）

之后的第二次调用不起作用，因为

.select2（）

调用希望将配置传递给它，就像第一次初始化时一样。它事先不知道您的配置，尤其是在您替换整个

.html（）

时。我建议将配置保存到一个可重复使用的变量

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

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

然后，您可以在调用

.html（）

后再次调用它。在重新初始化之前，您可能必须执行此操作，这将解除所有事件与它的绑定。如果您有一个动态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,
    },
  );
});

您可以查看我为什么调用

…选择2config.ajax

，以维护您拥有的任何其他ajax选项，并仅覆盖

url

参数。如果您认为它看起来更干净，也可以单独执行此操作：

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

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

---

您只需重新初始化select2元素。在

.html（）

之后的第二次调用不起作用，因为

.select2（）

调用希望将配置传递给它，就像第一次初始化时一样。它事先不知道您的配置，尤其是在您替换整个

.html（）

时。我建议将配置保存到一个可重复使用的变量

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

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

然后，您可以在调用

.html（）

后再次调用它。在重新初始化之前，您可能必须执行此操作，这将解除所有事件与它的绑定。如果您有一个动态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,
    },
  );
});

您可以查看我为什么调用

…选择2config.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（）

之前打错电话了。我现在可以加载select2，但我不认为我可以使用config变量，因为我的url实际上是在其他表单输入值上动态构建的。尽管如此，仍然可以保留原始调用。我在这里复制了两个地方的代码。我将用一个方法更新我的答案以满足您的需要。更新-查看一下您是否使用相同的配置重新初始化了？会有其他代码干扰吗？嗯。。。我需要再检查一下。我可能是在

.html（）

之前打错电话了。我现在可以加载select2，但我不认为我可以使用config变量，因为我的url实际上是在其他表单输入值上动态构建的。尽管如此，仍然可以保留原始调用。我在两个地方复制代码。我将用一种方法更新我的答案，以满足您的需要。更新-看一看Hi Dan，我的答案对您有用吗？很接近，可以接受。我的情况是，我只需要再次呼叫

选择2

重新初始化。很高兴你成功了Hi Dan，我的答案对你有用吗？很接近，可以接受。我需要再次调用

选择2

重新初始化我的案例。很高兴您能正常工作