我正在建立一个多面搜索,在该搜索中序列化表格数据并用于确定要使用的内容load()。我有两个主要部分,即侧边栏(.sidebar)和结果区域(.results),所有部分都包装在wrapper(.wrap)div中。
load()
.sidebar
.results
.wrap
var mainContent = .results $('#facets').change(function(e){ mainContent.load('?' + formData + ' .results'); e.preventDefault(); });
当我以这种方式执行它时,表单将继续按预期运行(将结果异步加载到change()上。)
…但是 也必须加载表单,这一点很重要 ,因为搜索结果会动态填充这些方面。
当我将mainContent变量更改为整个包装器分区时…
mainContent
var mainContent = .wrap $('#facets').change(function(e){ mainContent.load('?' + formData + ' .wrap'); e.preventDefault(); });
..表单首次提交更改,但是在通过将其拉入DOM后停止响应ajax。
ajax
我想念什么?
使用 委托事件 ,因为元素在DOM加载后通过ajax加载:
$(document).on('change','#facets',function(e){ mainContent.load('?' + formData + ' .wrap'); e.preventDefault(); });