By default alert is coming?

By default alert is coming?

Hi

Here is my program :--------

<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<style>
.intro{
background: #000;
}
</style>
<script>
function g_fun()
{
var items=['1','2','3','4'];
var newitem=$.grep(items,function(chkval){
if(chkval=='1')
return false;
return true;
});
alert(newitem);
}

function m_fun()
{
var items=['1','2','3','4'];
var newitem=$.map(items,function(chkval){
if(chkval=='1')
return false;
return chkval;
});
alert(newitem);
}

function fun1(){
return this + 1;
}
function shouts(n){
alert('xx');
document.body.style.fontSize = n +'px';
}
$(document).ready(function(){
$('div').on('click','input[type="button"]',function(event){event.stopPropagation();alert("hello");});

$('.divs').click(function(){alert('byr');});

$('input[type="button"]').addClass("intro");

$('#k','#l','#m').click(shouts($(this).html()));

});
</script>

</head>

<body>
<input type="button" value="Call Grep" onclick="g_fun();">
<input type="button" value="Call Map" onclick="m_fun();">

<div class = "divs">
<input type = "button" value = "Propagates">
</div>

<p>HELLO WORLD</p>
<a href = "#" id = "k">12</a>
<a href = "#" id = "l">14</a>
<a href = "#" id = "m">16</a>
</body>


</html>

When I run the program first time ,it is showing alert with the value "xx"(I have higlighted the section from where alert is coming).
How is that possible ? I never clicked on any of the hyperlinks , so "shouts" function should not be called and so alert will not need to come 

Please have a look at this problem 

Varun