|
Сообщение от Chekist
|
|
Не могу понять почему не срабатывает клик по span с новым классом
|
потому что в момент обьявления элемента с таким классом несуществует!!!
в .on() ваше счастье ... )))
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
div {
display: block;
}
.wrapper {
margin: 0 auto;
width: 960px;
height: 1000px;
background: #FFF;
}
#window {
position: relative;
margin: 0px auto;
width: 500px;
height: 300px;
border: 1px solid #EEE;
border-radius: 10px;
background: #DDD;
}
#window textarea {
display: block;
margin: 20px;
width: 460px;
height: 200px;
border-radius: 10px;
border: 1px solid #EEE;
outline: none;
resize: none;
font-size: 24px;
}
.window-button {
position: absolute;
left: 150px;
bottom: 18px;
width: 200px;
height: 40px;
border: 1px solid black;
border-radius: 5px;
background: #FFF;
}
.window-button-span {
display: block;
width: 200px;
height: 40px;
text-align: center;
cursor: pointer;
line-height: 40px;
font-size: 24px;
}
.window-button-span-go {
display: block;
width: 200px;
height: 40px;
text-align: center;
cursor: pointer;
line-height: 40px;
font-size: 24px;
}
#div-window-userform {
position: absolute;
left: 20px;
bottom: 65px;
width: 460px;
height: 80px;
opacity: 0;
}
#div-window-userform form {
margin: 0 auto;
}
#div-window-userform input {
display: block;
margin: 0 auto;
width: 350px;
height: 20px;
outline: none;
border-radius: 5px;
text-align: center;
}
#window.small{
background-color: #FFFF00;
}
#window.big{
background-color: #FF69B4;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$(".window-button-span").click(function () {
if ($(".window-textarea").val().length) // Вопрос заполнен
{
if ($("#window").hasClass("small")) // Если вопрос заполнен
{
$(".small").animate({
"height": "400px"
}, 300, function ()
{
$(this).removeClass("small").addClass("big");
$(".window-button-span").text("Отправить!").removeClass("window-button-span").addClass("window-button-span-go");
});
$("#div-window-userform").delay(150).css("display", "block").animate({
opacity: 1
}, 400);
};
} else // Вопрос НЕ заполнен
{
alert("Пожалуйста, сформулируйте Ваш вопрос!")
}
});
});
$(document).ready(function () {
$(document).on("click", ".window-button-span-go", function () {
alert("Блабла");
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="small" id="window">
<!-- Окно вопроса -->
<textarea class="window-textarea" name="window-textarea" autofocus></textarea>
<div class="hidden" id="div-window-userform">
<form name="window-userform">
<input id="window-userform-email" type="text" name="window-userform-email" placeholder="Укажите адресс Вашей электронной почты" />
</br>
<input id="window-userform-password" type="text" name="window-userform-password" placeholder="Придумайте пароль для входа на Pro-Experts.ru" />
</form>
</div>
<div class="window-button">
<!-- Кнопка "Спросить!" --> <span class="window-button-span" id="window-button-span">Спросить...</span>
</div>
</div>
</div>
</body>
</html>