Edit in JSFiddle

var i=0;
$("#target1").click(function(){
    $('#msg1').text('click - ' + i++);
});

var j=0;
$("#target2").on('click', function(){
    $('#msg2').text('on - ' + j++);
});

var k=0;
$("#target3").delegate('', 'click', function(){
    $('#msg3').text('delegate - ' + k++);
});

var l=0;
$("#target4").bind('click', function(){
    $('#msg4').text('bind - ' + l++);
});

<div id="target1" class="btn btn-info">.click()</div>
<div id="msg1" class="output"></div>

<div id="target2" class="btn btn-info">.on()</div>
<div id="msg2" class="output"></div>

<div id="target3" class="btn btn-info">.delegate()</div>
<div id="msg3" class="output"></div>

<div id="target4" class="btn btn-info">.bind()</div>
<div id="msg4" class="output"></div>

.clickable{
    background: lightgray;
    width: 300px;
    cursor: pointer;
}
.output{
    height: 30px;
    width:300px;
    border: 1px solid red;
}
.myTip{
    background:lightgray;
}