English | 正體中文 | 简体中文

使用 Bind 方法


BIND() - 除了直接注册事件外, 你还可以用bind方法注册事件
//直接注册click事件
$("p").click(function(){
   //你的程式码
});

//用bind方法注册事件
$("p").bind("click", function(){
   //你的程式码
});

范例

范例程式码Expand
<!-- HTML -->
<div id="example-section23">
    <button type="button" id="btn231">Click on me</button>    
</div>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function (){
    $("#btn231").click(function(){
        alert("bind working!");
    }); 
});
</script>




UNBIND() - 注销事件
$("p").unbind("click", function(){ 
    //你的程式码
});

范例
注册/注销Click事件

范例程式码Expand
<!-- HTML -->
<div id="example-section25">    
    <input id="btn251" type="button" value="Click me (click event ON)">
    <input id="cb252" type="checkbox" checked />Toggle Click event
</div>

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function (){
    var clickAction = function(){ alert("clicked!");};

    $("#btn251").bind("click", clickAction);

    $("#cb252").change(function(){    
        var button = $("#btn251");

        /* test if checkbox checked */     
        if($(this).is(":checked")){            
            button.bind("click", clickAction); 
            button.val("Click me (click event ON)")           
        }else{            
            button.unbind();        
            button.val("Click me (click event OFF)")           
        }
    });
});
</script>




同时注册多个事件
$("p").bind("focus click keydown", function(){ //注册多个事件
    //你的程式码
});

范例
将滑鼠移进移出


范例程式码Expand
<!-- HTML -->
<style>
  #example-section24 div {
    float:left;width:100px;height:100px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }
</style>
<div id="example-section24">    
    <div id="div241">Move mouse in and out</div>    
    <br style="clear:both"/>
    <span id="span249"></span>
</div>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function (){
    $("#div241").bind("mouseout mouseover", function(e){        
        $("#span249").html(e.type + " triggered!")
    });
});
</script>




如果我们想动态增加元素并同时在元素上注册事件, 我们通常会这么做
$(document).ready(function (){    
    var newButton = function(){
        var button = $("<button type=\"button\">add button</button>");
        button.bind("click", newButton);
        $(this).after(button);
    }

    $("button").click(newButton);
});

范例

范例程式码Expand
<!-- HTML -->
<div id="example-section27">    
    <button class="addbutton" type="button">add button</button>
</div>

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function (){    
    var newButton = function(){
        var button = $("<button class=\"addbutton\" type=\"button\">add button</button>");
        button.bind("click", newButton);        
        $(this).after(button);
    }

    $(".addbutton").click(newButton);
});
</script>

但如果用jQuery LIVE()方法我们就可以同时新增元素并让它自动注册事件
$(document).ready(function (){    
    $("#example-section27 button").live("click", function(){
        var button = $("<button type=\"button\">add button</button>");        
        $(this).after(button);
    });
});

范例

范例程式码Expand
<!-- HTML -->
<div id="example-section28">    
    <button class="liveaddbutton" type="button">add button</button>
</div>

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function (){    
    $(".liveaddbutton").live("click", function(){
        var button = $("<button class=\"liveaddbutton\"" + 
                       " type=\"button\">add button</button>");        
        $(this).after(button);
    });
});
</script>



© 2012 PureExample.com contact