我有一个页面，在初始加载时有各种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()调用my的代码中，但是select2不会初始化，也没有控制台错误。
这些select2调用如何绑定到初始元素以及之后添加的元素？我怀疑我可能在这里缺少一些小东西或明显的东西。
编辑： select2 AJAX配置中的URL也是动态的，基于其他表单输入值。
您将只需要重新初始化select2元素。之后的第二个呼叫.html()不起作用，因为该.select2()呼叫期望您的配置像第一次初始化时一样传递给它。它不了解您的配置，特别是如果您要替换整个.html()。我建议将您的配置保存到一个可以重复使用的变量中。
const select2Config = {
ajax: {
url: 'myurl',
dataType: 'json'
}
};
$(function() {
$('[data-behavior="select2-parent"]').select2(select2Config);
});
然后，您可以在通话后再次调用它.html()。您可能必须在重新初始化之前销毁该select2控件，这将取消所有事件的绑定。如果您有动态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);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句