<body>
<header class="cf">
<div class="logo"><img src="logo.PNG"></div>
<nav>
<ul>
<li id="login"><a id="login-trigger"> Все страницы <span>▼</span></a>
<div id="login-content" >
<form>
<fieldset id="inputs">
<table cellspacing="0" cellpadding="0">
<tr><td width = "70%"></td><td><input type="text" placeholder="Поиск страниц"></td></tr>
</table><br>
<table cellspacing="0" cellpadding="7">
<tr class="all-page-selected-row">
<td width="30%"><a class="title_page">Главная</a></td>
<td width="30%"><div class="url_page"><a class="invis" href="/index">/index</a></div></td>
<td width="30%"></td>
<td><a class="page-editing">Изменить</a></td>
<td> </td>
<td><a class="invis" href="del">Удалить</a></td>
</tr>
<tr class="all-page-selected-row">
<td width="30%"><a class="title_page">Продукция</a></td>
<td width="30%"><div class="url_page"><a class="invis" href="/production">/production</a></div></td>
<td width="30%"></td>
<td><a class="page-editing">Изменить</a></td>
<td> </td>
<td><a class="invis" href="del">Удалить</a></td>
</tr>
</table>
</fieldset><br><br><br>
<div id="form_under_line">
<fieldset id="actions">
<table><tr>
<td width="90%"></td>
<td><div id="closed" class="cancel"> Закрыть </div>
</table>
</fieldset>
</div>
</div>
</li>
<li id="login"><a id="login-trigger2"> Свойства страницы<span>▼</span></a>
<div id="login-content2">
<form method="post">
<input type="text" name="title" value="Заголовок">
<input type="submit">
</form>
</div>
</li>
</ul>
</nav>
</header>
<div style = "border: 1px solid;"><h1>Тестовый текст</h1></div>
</body>
</html>
<script>
//Функция открытия окна: ВСЕ СТРАНИЦЫ
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
//Функция закрытия окна: ВСЕ СТРАНИЦЫ
$(document).ready(function(){
$('div .cancel').click(function(){
$('#login-content').hide(); })
});
//Функция открытия окна: СВОЙСТВА СТРАНИЦЫ
$(document).ready(function(){
$('#login-trigger2').click(function(){
$(this).next('#login-content2').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
//Функция закрытия окна: СВОЙСТВА СТРАНИЦЫ
$(document).ready(function(){
$('div .cancel').click(function(){
$('#login-content2').hide(); })
});
//Подсветка параметров ( ССЫЛКА, ИЗМЕНИТЬ, УДАЛИТЬ ) в таблице: ВСЕ СТРАНИЦЫ
$(document).ready(function(){
$('.all-page-selected-row').mousemove(function(){
$(this).css("background","#f2f2f2");
$(this).find('.invis').css("color","#9b9b9b");
$(this).find('.page-editing').css("color","#9b9b9b");
$(this).find('.page-editing').css("border-bottom","1px solid #9b9b9b");
});
});
$(document).ready(function(){
$('.all-page-selected-row').mouseout(function(){
$(this).css("background","#fff");
$(this).find('.invis ').css("color","#fff");
$(this).find('.page-editing').css("color","#fff");
$(this).find('.page-editing').css("border-bottom","1px solid #fff");
})
});
$(document).ready(function(){
var title_page='';
var url_page='';
$('.all-page-selected-row').mousemove(function SelectRow(){
title_page = $(this).find('.title_page').text();
url_page = $(this).find('.url_page').text();
return title_page;
});
$('.page-editing').click(function PageEditing(){
title = title_page;
url = url_page;
line1='<td width="30%"><input type="text" value="'+title_page+'"></td>';
line2='<td width="30%"><input type="text" value="'+url_page+'"></td>';
line3='<td width ="10%"></td><td width="30%"><a class="link-save-page">Сохранить</a></td>';
line4='<td><a class="link-cancel-page">Отменить</a></td>';
data = line1 + line2 + line3 + line4;
$(this).closest('tr').html(data);
//Вот тут начинается проблема. Если "$('.link-cancel-page')" не внутри
//функции $('.page-editing').click(function PageEditing(), то при нажатии
//ничего не происходит. Если внутри, то только 1 раз.
//Как избежать проблемы?
$('.link-cancel-page').click(function(){
back1 = '<td width="30%"><a class="title_page">'+title+'</a></td>';
back2 = '<td width="30%"><div class="url_page"><a class="invis" href="'+url+'">'+url+'</a></div></td>';
back3 = '<td width="30%"></td><td><a class="page-editing">Изменить</a></td><td> </td><td><a class="invis" href="del">Удалить</a></td>';
back = back1 + back2 + back3;
$(this).closest('tr').html(back);
});
});
});
</script>