jQuery事件绑定

Demo: 使用 jq 绑定单机事件

第一种绑定方式

$(function(){

//绑定删除事件

$("button").click(function(){

alert("绑定了一个单机事件!")

})

})

第二种绑定方式

$(function(){

$("button").click(remove);

})

function remove(){

alert("删除数据!")

}

第三种绑定方式:

$(function(){

$("button").on("click",function(){

alert("绑定了一个单机事件!")

})

})

第四种绑定方式:

$(function(){

$("button").bind("click",function(){

alert("绑定了一个单机事件!")

})

})

Demo: 为多个元素绑定事件

html:

    
     
              
       
                    
雇员编号
        
雇员姓名
        
雇员职位
        
雇员薪资
        
部门编号
        
操作
               
               
                    
7963
        
SMITH
        
PRESIDENT
        
5000.00
        
10
        
删除
               
               
                    
7788
        
SMITH
        
PRESIDENT
        
5000.00
        
10
        
删除
               
               
                    
7932
        
SMITH
        
PRESIDENT
        
5000.00
        
10
        
删除
               
               
                    
7369
        
SMITH
        
PRESIDENT
        
5000.00
        
10
        
删除
               
               
                    
7521
        
SMITH
        
PRESIDENT
        
5000.00
        
10
        
删除
               
          
     

jq:

1 $(function(){ 2     $("button").click(removeEmpByld); 3 }) 4 //定义删除雇员的函数 5 function removeEmpByld(){ 6     var flag = window.confirm("你确定要删除此数据吗?"); 7     //不确定则结束此方法 8     if(!flag){ 9         return;10     }11     //获取要删除的雇员编号12     //$(this):表示触发该函数的按钮元素本身13     //$(this).parents("tr"): 表示取得当前按钮的 tr(所在行)14     //$(this).parents("tr").find("td:eq(0)"): 表示根据当前按钮的父元素(tr)找到对应数据编号所在的td15     //var empno = $(this).parents("tr").find("td:eq(0)").text(): 取得第一个 td 中的文本内容16     var empno = $(this).parents("tr").find("td:eq(0)").text();17     //删除之后将页面中对应的内用也移除18     var parentsTr = $(this).parents("tr");19     $(this).parents("tr").fadeOut('slow',function(){20         parentsTr.remove();21         console.log($("tr").length);22     });23 }