<!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>');
}