jquary 中的live函数在firebug中提示不是一个函数的问题

jquery1.4使用.live(),1.7以后开始使用.on()。 
两者的区别： 
$('#count').live('click', function() { 
          //function code here. 
        }); 
$('#Grid1Table').on('click', '#count', function() { 
          //function code here. 
        }); 
这里很关键的一点是：#Grid1Table是#count的父节点以上的节点 

 

代码：

<style type="text/css">
.border {
    background:#CDCDCD;
}
.tbl_detail_title {
    background-color: #EBEBEB;
    font-weight: bold;
}
.box_table a {
    color:#4A8109;
}
.box_table tr{
    background-color:expression((this.sectionRowIndex%2==0)?"#F9F9D3":"#FFFEEA");
}
.box_table td {
    line-height:20px;
}
.a_span{
    color : #4A8109;
    font-size: 12px;
    text-decoration: none;
    text-decoration: underline;
    cursor: HAND;
}
.white{
  height:20px;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">

  $(document).ready(function(){

    //全局变量index,只增
    var lastIndex=0;

    //增
    $("#add_button").click(function(){

      var txt1=$('#txt1').val();
      var txt2=$('#txt2').val();
      var txt3=$('#txt3').val();
      var str='<tr class="white"><td align="center"><input type="checkbox" name="cbx" class="ch" ></td>'+
              '<td class="td2" align="center"></td>'+
              '<td align="center"><input type="hidden" class="v1" name="bookList['+lastIndex+'].id" value="'+txt1+'"/>'+txt1+'</td>'+
              '<td align="center"><input type="hidden" class="v1" name="bookList['+lastIndex+'].name" value="'+txt2+ '"/>'+txt2+'</td>'+
              '<td align="center"><input type="text" class="v1" name="bookList['+lastIndex+'].price" value="'+txt3+ '"/>'+txt3+'</td></tr>';
      //alert(str);
      $("#pdTB_body").append(str);
      setItemIndex();
      clearText();
      lastIndex++;
      });
    //查看HTML
    $("#btnSubmit").click(function(){
        alert($("#pdTB_body").html());
    });
    //删
    $("#del_button").click(function(){

        $("#pdTB_body").find(".ch").each(function(){
            if($(this).attr("checked")==true){
            $(this).parent().parent().remove();}});

        setItemIndex();
    });
    //改
     $("#mod_button").click(function(){

        if($("input[name='cbx'][checked]").length>1){
          alert($("input[name='cbx'][checked]").length+"! choose one");
          return;
        };

       $("#pdTB_body").find(".ch").each(function(){
                if($(this).attr("checked")==true){
                     var txt="#txt";
                     var txtIndex=1;
                     $(this).parent().parent().find(".v1").each(function(){
                         $(txt+txtIndex).val($(this).val());
                         txtIndex+=1;
                        });
                     $(this).parent().parent().remove();
                        }
                    });

          setItemIndex();

      });

      //设置序号
      function setItemIndex(){
       var index=1;
       $("#pdTB_body").find(".td2").each(function(){
            $(this).html(index);
            index+=1;
            });
      }

      //清空
      function clearText(){
         $('#txt1').val("");
         $('#txt2').val("");
         $('#txt3').val("");
      }

     //全选、取消
     $("#cbx_link").click(function(){
       var cbxAll=$("input[name='cbx']").length;
       var cbxChecked=$("input[name='cbx'][checked]").length;
       if(cbxChecked < cbxAll)
         $("input[name='cbx']").attr("checked",true);
       else
         $("input[name='cbx']").attr("checked",false);
     });

    });
</script>


<div style="width:50%">
  <fieldset>
    <table>
      <tr>
        <td>编号：</td><td><input type="text" id="txt1" style="width:100px"/></td>
        <td>名称：</td><td><input type="text" id="txt2" style="width:100px"/></td>
        <td>价格：</td><td><input type="text" id="txt3" style="width:100px"/></td>
      </tr>
      <tr>
        <td colspan="6"><input type="button" value="add"    id="add_button" class="btnShort"/>
                        <input type="button" value="delete" id="del_button" class="btnShort"/>
                        <input type="button" value="modify" id="mod_button" class="btnShort"/></td>
      </tr>
    </table>

    <table border="0" cellpadding="0" cellspacing="0" class="border" style="width:100%;">
     <tr>
      <td>
            <table id="pdTB" width="100%" border="0" cellpadding="1" cellspacing="1" class="box_table word_break">
                    <tbody id="pdTB_body">
                        <tr class="white">
                        <td><div align="center" class="tbl_detail_title"><span id="cbx_link" class="a_span">全选</span></td>
                        <td><div align="center" class="tbl_detail_title">项次</td>
                        <td><div align="center" class="tbl_detail_title">编号</td>
                        <td><div align="center" class="tbl_detail_title">名称</td>
                        <td><div align="center" class="tbl_detail_title">价格</td>
                        </tr>

                    </tbody>
                </table>
        </td>
      </tr>
     </table>

  </fieldset>
</div>

<input type="button" value="查看innerHTML" id="btnSubmit" class="btnShort"/>

这里借用了一位朋友的代码。

 

jquery中的on和live（以及delegate）效果是不同的 
live以及delegate对于以后创建的dom节点依然有效，on就指定到当前节点了 
当然，使用live和delegate的选择器有很大特点，就是它支持新增加的dom节点，也就是可能是多个，如果使用$('#id')，就看不出有代理方式有什么方式了

 

原本 

$('#count').live('click', function() {
  //function code here.
});

可以直接替换成 

$('#count').on('click', function() {
  //function code here.
});

的，但是on多了个条件，就是$('#count')必须是当前存在的！ 

如果$('#count')当前不存在，比如是动态生成的，那么就需要用代理的模式走，就变成 

$(父节点).on("事件","动态生成子节点",handler) 

这样了。 

但对于当前存在的，就没必要这么搞了。