jQuery - event delegation performance
HTML
<ul id="my-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
<div id="msg"></div>
CSS
ul{
margin: 10px;
}
li {
padding: 4px;
cursor: pointer;
width: 100px;
}
li:hover {
background: lightgray;
}
#msg{
color: navy;
font-weight:bold;
}
JavaScript
$('#my-list').delegate('li', 'click', function() {
var item = $.trim($(this).text());
console.log(item);
$('#msg').text('you selected: ' + item);
});
/*$('#my-list').click( function() {
var item = $.trim($(this).text());
console.log(item);
$('#msg').text('you selected: ' + item);
});*/