如下图所示，
点击添加后，会新添加一行，但是二级联动就失效了，
$('.provinceList').live('change', function(){
var provinceId = $(this).val();
var obj = $(this);
$.post('/yuyue/ajaxCityList', {'provinceId':provinceId}, function(list){
var data = eval( '(' + list + ')' );
if( data . status == 0 )
{
var html = '<option v
在JavaScript和jQuery编程中，动态添加的HTML元素可能会导致与之相关的事件处理程序失效，这是因为JavaScript在页面加载时只会为已经存在的元素绑定事件。当使用`.bind()`方法来绑定事件时，新添加的元素不会自动继承这些绑定。在这种情况下，我们需要使用`.live()`或`.on()`方法来确保事件处理程序能够应用于动态生成的元素。
本文标题提到的问题是关于jQuery中动态添加HTML后，二级联动选择框（即下拉列表的联动效果）失效的问题。在描述中，我们可以看到一个典型的场景：用户点击“添加”按钮后，表格中新增一行，这一行包含一个省份选择下拉列表（provinceList）。当用户更改省份选择时，应通过Ajax异步请求获取对应城市的列表并填充到城市选择下拉列表中。然而，这个联动效果在新添加的行中无法正常工作。
解决这个问题的关键在于正确地绑定事件。在示例代码中，使用了`.live()`方法来绑定`change`事件，这允许事件处理程序作用于当前和未来的匹配元素。`.live()`方法的工作原理是将事件绑定到文档根节点，然后监听所有冒泡到根节点的事件，这样新添加的元素也能触发事件。
代码片段如下：
```javascript
$('.provinceList').live('change', function() {
var provinceId = $(this).val();
var obj = $(this);
$.post('/yuyue/ajaxCityList', {'provinceId': provinceId}, function(list) {
var data = eval('(' + list + ')');
if (data.status == 0) {
var html = '<option value="">-请选择城市-</option>';
for (var i = 0; i < data.list.length; i++) {
html += '<option value="' + data.list[i].region_id + '">' + data.list[i].region_name + '</option>';
}
obj.parent().find("select[name='region_id']").html(html);
}
});
});
```
然而，`.live()`方法已在jQuery 1.7版本中被弃用，推荐使用`.on()`方法来代替。`.on()`方法更强大且灵活，可以处理当前及未来的元素。如果要使用`.on()`来解决这个问题，可以这样修改：
```javascript
$(document).on('change', '.provinceList', function() {
var provinceId = $(this).val();
var obj = $(this);
$.post('/yuyue/ajaxCityList', {'provinceId': provinceId}, function(list) {
var data = eval('(' + list + ')');
if (data.status == 0) {
var html = '<option value="">-请选择城市-</option>';
for (var i = 0; i < data.list.length; i++) {
html += '<option value="' + data.list[i].region_id + '">' + data.list[i].region_name + '</option>';
}
obj.parent().find("select[name='region_id']").html(html);
}
});
});
```
在这个例子中，`.on()`方法的语法是`$(document).on(eventName, selector, handler)`，它将事件监听器添加到`document`对象上，然后筛选出匹配`selector`的元素来执行`handler`函数。这样，无论是现有元素还是之后动态添加的元素，只要符合选择器，就能正确响应事件。
总结来说，要解决jQuery动态添加HTML后JS事件失效的问题，可以使用`.live()`（已弃用）或`.on()`方法来绑定事件，特别是对于动态生成的元素。`.on()`提供了更优的性能和更好的灵活性，是现代jQuery应用中的首选方案。同时，确保正确处理Ajax异步请求和数据解析，以实现预期的功能，如本例中的二级联动选择。
