Да я все это осознаю. тело события я называю то что происходит при событии т.е.
$('.sel1').click(function(){
/*Тело события*/
inne = this.id
document.querySelector('.all').innerHTML = '<div>Helloy word</div>';
/*Закончилось тело события*/
});
Я написал простой код но там все гораздо понятнее, а проблема та же
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/ind.js"></script>
<style>
.block{
width:100px;
height:100px;
background:silver;
}
</style>
</head>
<body>
<div class='block'></div>
<div class='all'>
Вместо этого блока появятся три других
</div>
</body>
</html>
/*Так работает только если при первом нажатии на sel1*/
$(document).ready(function(){
$('.block').click(function(){
document.querySelector('.all').innerHTML = '<div id=\'20\' class=\'sel1\'>1</div><div id=\'30\' class=\'sel1\'>2</div><div id=\'40\' class=\'sel1\'>3</div>';
$('.sel1').click(function(){
inne = this.id
document.querySelector('.all').innerHTML = '<div id=\'20\' class=\'sel1\'>'+inne+'</div><div id=\'30\' class=\'sel1\'>'+inne+'</div><div id=\'40\' class=\'sel1\'>'+inne+'</div>';
});
});
});
/*Так вообще не работает почему? и как сделать чтоб работыло?*/
$(document).ready(function(){
$('.block').click(function(){
document.querySelector('.all').innerHTML = '<div id=\'20\' class=\'sel1\'>1</div><div id=\'30\' class=\'sel1\'>2</div><div id=\'40\' class=\'sel1\'>3</div>';
});
$('.sel1').click(function(){
inne = this.id
document.querySelector('.all').innerHTML = '<div id=\'20\' class=\'sel1\'>'+inne+'</div><div id=\'30\' class=\'sel1\'>'+inne+'</div><div id=\'40\' class=\'sel1\'>'+inne+'</div>';
});
});