jQuery Custom Event

If you find built in events is not enough, you can also build your own custom event
$("div").bind("yourCustomEvent", function(e, value1, value2){
   //your code
});
ExampleCustom 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 (){    
    $("#example-section26 div").bind("HighlightEvent", function(e, color, colorTitle){
        $(this).html("Custom event triggered - " + colorTitle);
        $(this).css("background-color", color);
    });

    $("#btn261").click(function(){
        $("#example-section26 div").trigger("HighlightEvent", ["orange", "Color Orange"]);    
    });

    $("#btn262").click(function(){
        $("#example-section26 div").trigger("HighlightEvent", ["green", "Color Green"]);    
    });
});
</script>

<!-- HTML -->
<a name="#custom-event-example"></a>
<div id="example-section26">    
    <div>Build your own event</div>
    <input id="btn261" type="button" value="Trigger custom event(Orange background)">
    <input id="btn262" type="button" value="Trigger custom event(Green background)">
</div>



comments powered by Disqus