<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MHG</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container" style="margin-top: 50px">
<div class="row">
<div class="col-lg-12 text-center">
<h1>jQuery unbind sample</h1>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Name</span>
<input type="text" id="name" class="form-control" placeholder="Touch to type" aria-describedby="basic-addon1">
</div>
<br />
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Event</span>
<select class="form-control">
<option value="change">Change</option>
<option value="focus">Focus</option>
<option value="all">All</option>
</select>
</div>
<br />
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<a class="btn btn-success" onclick="removeUnbind()">Remove unbind</a>
</div>
<div class="btn-group" role="group">
<a class="btn btn-success" onclick="addBind()">Add bind(Change, Focus Event)</a>
</div>
</div>
<br />
<div class="panel panel-info">
<div class="panel-heading">Transactions</div>
<div class="panel-body" id="transactions">
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</body>
</html>
$(function(){
addBind();
})
function addBind(){
$("#name").change(function(){
AddTransaction("success", "Changed text")
})
$("#name").focus(function(){
AddTransaction("success", "Worked to focus on events")
})
AddTransaction("success", "Change and Focus events added for 'Name' input.")
}
function removeUnbind(){
var type = $("select").val();
if (type != "all") {
$("#name").unbind(type);
AddTransaction("danger", type + " event removed for 'Name' input.")
}else{
$("#name").unbind();
AddTransaction("danger", "All events removed for 'Name' input.")
}
}
function AddTransaction(type, message){
$("#transactions").append('<div class="alert alert-'+type+'" role="alert">'+message+'</div>');
}