form标签的位置影响jQuery WeUI滚动加载使用的例子

最近在做微信开发的时候出现了一个问题，发觉滚动加载不起作用了。由于代码较多。我简化下，原来的代码大致是这样得：

<form id="form1">
<div id="tab2" class="weui_tab_bd_item">
<div class="content">
<div class="weui_cells" data-bind="with:WorkplaceMatchVM">
    。。。
</div>
<div class="weui-infinite-scroll hidden">
    <div class="infinite-preloader"></div>
               正在加载...

    </div>
</div>
</div>
</div>
</form>

相应的js代码：

 $("#tab2").infinite().on("infinite", function () {
                console.info("tab2");
                if (page.loading) return;
                page.loading = true;
                $("#tab2 .weui-infinite-scroll").show();
                setTimeout(function () {
                    console.info(page.pageIndex);
                    GetWorkplaceMatchList();
                    page.loading = false;
                    $("#tab2 .weui-infinite-scroll").hide();
                }, 1000);
            });

但是在js调试console输出中并没有看到tab2，这意味着根本未执行滚动加载事件。原以为是在调用的时候少写了什么代码，但是经过对比后，并未发现与其他页面的滚动加载有什么不同。要说有什么不同的话，也就是多了一个form标签。但这个标签也没引起我的注意，因为实在想不出这个标签会对滚动加载有什么影响。后来由于发现在这个页面发现其他滚动加载不受影响，可以正常执行。而这些滚动加载没有form标签，才引起了我的注意。
于是我调整了form标签的位置，调整后代码这个样子：

<div id="tab2" class="weui_tab_bd_item">
<form id="form1">
<div class="content">
<div class="weui_cells" data-bind="with:WorkplaceMatchVM">
    。。。
</div>
<div class="weui-infinite-scroll hidden">
    <div class="infinite-preloader"></div>
               正在加载...

    </div>
</div>
</div>
</form>
</div>

刷新执行后，没问题了，滚动加载可以正常使用。但是，仍然不能明白这个form标签为什么会影响滚动加载的运行。我查看了jquery-weui.js相关infinite事件定义的相关代码。没有找到与form相关的地方。真是日了狗了。看来JAVASCRIPT的水平还是菜啊。牵涉到底层的代码就分析不出原因了