jQuery Bind Event

BIND() - Besides register event directly, you can also use bind mehtod to register events.
//register click event directly
$("p").click(function(){
   //your code here
});

//register click event directly by using BIND
$("p").bind("click", function(){
   //your code here
});
ExampleBIND() - Besides register event directly, you can also use bind mehtod to register events
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">

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

<!-- HTML -->
<a name="#bind-event"></a>
<div id="example-section23">
    <button type="button" id="btn231">Click on me</button>    
</div>


UNBIND() - Unregister event
$("p").unbind("click", function(){ 
    //your code here
});
ExampleUNBIND() - Unregister events
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<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>

<!-- HTML -->
<a name="#unbind-event"></a>
<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>


Register multiple events all at once
$("p").bind("focus click keydown", function(){ 
    //your code here
});
ExampleRegister multiple events all at once
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">

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

<!-- HTML -->
<a name="#multiple-events"></a>
<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>


If we want to add elements dynamically and register a event to it, this is what we normally do
$(document).ready(function (){    
    var newButton = function(){
        var button = $("<button type=\"button\">add button</button>");
        button.bind("click", newButton);
        $(this).after(button);
    }

    $("button").click(newButton);
});
ExampleAdd elements dynamically
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<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>

<!-- HTML -->
<a name="#add-elements-dynamically"></a>
<div id="example-section27">    
    <button class="addbutton" type="button">add button</button>
</div>


But with LIVE() we can archive this all at once
$(document).ready(function (){    
    $("#example-section27 button").live("click", function(){
        var button = $("<button type=\"button\">add button</button>");        
        $(this).after(button);
    });
});
ExampleAdd elements dynamically with live()
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<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>

<!-- HTML -->
<a name="#live-add-elements-dynamically"></a>
<div id="example-section28">    
    <button class="liveaddbutton" type="button">add button</button>
</div>



comments powered by Disqus