Question

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

var mainContent = .results

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

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

...但表单也可以加载，这很重要，因为搜索结果会动态填充构面。

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

时

var mainContent = .wrap

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

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

我错过了什么？

Answer 1

使用delegated event，因为在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。

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

2 个答案: