Question

我有一个页面，该页面在初始加载时具有各种jQuery调用（select2，'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();

我将此添加到了调用我的.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，才能将所有事件都绑定到它。如果您有动态网址，则可以直接覆盖配置的那一部分，以最大程度地减少代码重复：

/* ... .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);

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

1 个答案: