最近的项目要做一个网页，使用到了Bootstrap，导入的jQuery版本是

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

同时，里面有一个四级联动的下拉框，在网上找了一个四级联动的demo，修改之后可以使用，但是使用到的jQuery版本是

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

刚开始还不知道1.7版本前的jQuery和1.7版本之后的jQuery还有改动，只是发现当引入较新的jQuery时，Bootstrap的响应式布局（导航条）可以使用，但是四级联动的下拉框就无法使用；当使用版本较老的jQuery版本时，可以使用四级联动的下拉框，但是无法使用Bootstrap的响应式布局（导航条）。

在网上搜索了一下，发现了问题：

<b>从jQuery 1.7开始，on() 函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。</b>

仔细检查了一下，发现四级联动的下拉框中用到了 live() 函数来绑定事件。

$('li' , '#City').live('click' , function(){});

改为用 on() 函数的写法应该是：

$('#City').on('click' , 'li', function(){});

特别指出，四级联动的下拉列表中的元素是在jQuery代码中动态添加的。

此外，即使符合条件的元素是on()函数执行后新添加，绑定事件对其依然有效。

附上 jQuery.on() 函数 api 网站：
jQuery.on() 函数 api