当ajaxed内容的一部分时，jQuery表单无法正常工作

我正在设置一个分面搜索，其中表单数据被序列化并用于确定要使用load()引入的内容。 我有两个主要部分，侧边栏（ .sidebar ）和结果区域（ .results ），都包装在一个包装器（ .wrap ）div中。

 var mainContent = .results $('#facets').change(function(e){ mainContent.load('?' + formData + ' .results'); e.preventDefault(); }); 

当我以这种方式执行时，表单继续按预期运行（在change（）上异步加载结果。）

…但重要的是表单也会被加载 ，因为facet是由搜索结果动态填充的。

当我将mainContent变量更改为整个包装器div时…

 var mainContent = .wrap $('#facets').change(function(e){ mainContent.load('?' + formData + ' .wrap'); e.preventDefault(); }); 

..表格第一次提交更改，但在通过ajax拉入DOM后停止反应。

我错过了什么？

Answer 1

使用委托事件 ，因为在DOM加载后通过ajax加载元素：

 $(document).on('change','#facets',function(e){ mainContent.load('?' + formData + ' .wrap'); e.preventDefault(); }); 

Answer 2

您可以尝试使用Mutation-Observers来处理这种情况

 var target = $( "#facets" )[0]; // Create an observer instance var observer = new MutationObserver(function( mutations ) { mutations.forEach(function( mutation ) { var newNodes = mutation.addedNodes; // DOM NodeList if( newNodes !== null ) { mainContent.load('?' + formData + ' .wrap'); e.preventDefault(); } }); }); var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); 

您可以在此处阅读有关Mutation Observers的更多信息。