请教个jquery的问题

Question

<SCRIPT src="./jquery.js" type="text/javascript"></SCRIPT>
<script language='javascript'>
var categoryRow = 1;
$(document).ready(function(){
$('#add_category').click(function(){
categoryRow++;
$("<tr><td><select class='category' id='"+categoryRow+"_1'><option value=''><-change category-></option> <option value=111>111</option> </select></td></tr>").appendTo('#insert');
});

$('.category').change(function(){
     alert( $(this).attr('id') );
    });
});</script><table id='insert'>
<tr>
<td><select class='category' id='1_1'><option value=''><-change category-></option> <option value=111 >111</option> </select> <input id='add_category' type='button' value='add' /> </td>
</tr>
</table>
以上代码麻烦请修改下jquery.js的路径后，直接保存成html文件浏览即可。想实现的功能很简单，运行一下基本就可以看出来了:
页面上有个add的按钮，click之后就会生成一个<select></select>标签。也就是触发$('#add_category').click(function()。当<select>标签触发change事件时，打印出当前select标签的id。
现在遇到的问题为:我直接写在html代码中的<select>标签可以触发change事件。然后通过add按钮生成出来的<select>标签则无法触发change事件。请问这是为什么？

Answer 1

解决这问题的办法也有了，那就是在$("<tr><td><select class='category' id='"+categoryRow+"_1'><option value=''><-change category-></option> <option value=111>111</option> </select></td></tr>").appendTo('#insert');这个select标签里主动添加onChange事件。就可以了。不过我实在不明白为什么jquery的$('.category').change(）却侦听不到。

Answer 2

你的程序逻辑错了，$(document).ready(function(){ // 加载后执行
        $('#add_category').click(function(){
                categoryRow++;
// 添加select 的逻辑是 点击 #add_category 后的是
                $("<tr><td><select class='category' id='"+categoryRow+"_1'><option value=''><-change category-></option> <option value=111>111</option> </select></td></tr>").appendTo('#insert');
        });
        
// 加载后执行，此时根本就没有 找到select  
        $('.category').change(function(){
                                alert( $(this).attr('id') );
    });
});
==>
$(document).ready(function(){
        $('#add_category').click(function(){
                categoryRow++;
                $("<tr><td><select class='category' id='"+categoryRow+"_1'><option value=''><-change category-></option> <option value=111>111</option> </select></td></tr>").appendTo('#insert');
// 放到点击事件之后，才能找到  你动态添加的select
      $('.category').change(function(){
                                alert( $(this).attr('id') );
    });        });
        
  
});

Answer 3

因为之后的select还没有生成，$('.category').change()只是侦听现在已经存在在DOM节点中的select，后来动态生成的select并不会被监听。要说具体原因的话，只能说jquery就是这么实现的。
如果要想侦听到后来动态生成的元素的话，用$('.category').live('change', function(){...});才可以。 

Answer 4

谢谢楼上两位，使用live可以解决了。