Форум

Chekist · #1 (**permalink**) 08.11.2013, 09:25

Почему не срабатывает

$(".window-button-span-go").click(function () {
            alert("Блаблабла");
        });

Ведь после увеличения окна класс span меняется корректно на .window-button-span-go... событие планируется вызывать по клику на span с новым классом.

???

http://jsfiddle.net/3aPQ2/1/

ksa · #2 (**permalink**) 08.11.2013, 09:30

Сообщение от Chekist

http://jsfiddle.net/3aPQ2/1/

Твой пример весь в ошибках...

Потому и не работает.

Chekist · #3 (**permalink**) 08.11.2013, 09:34

Дак это и так понятно, что есть ошибки...

Вот и хотелось бы спросить, как правильно вызывать событие кликом по новому классу спана .window-button-span-go?

Chekist · #4 (**permalink**) 08.11.2013, 09:38

Может как раз не по месту добавлена вторая функция и лучше делать условия в одной функции, но уже по классу спана?

ksa · #5 (**permalink**) 08.11.2013, 09:40

Сообщение от Chekist

как правильно вызывать событие кликом по новому классу спана .window-button-span-go?

Ты "до" этого ошибки исправь...

Там до собственно клика и дело не доходит...

Chekist · #6 (**permalink**) 08.11.2013, 09:44

Так вот же http://jsfiddle.net/3aPQ2/2/
Не могу понять почему не срабатывает клик по span с новым классом

$(document).ready(function () {
        $(".window-button-span-go").click(function() { 
          alert("Блабла");
        });
});

ksa · #7 (**permalink**) 08.11.2013, 09:49

Сообщение от Chekist

Так вот же http://jsfiddle.net/3aPQ2/2/
Не могу понять почему не срабатывает клик по span с новым классом

Я х/з как еще сказать...

Пешы скрип без ошибок

Chekist · #8 (**permalink**) 08.11.2013, 09:53

Сообщение от ksa

Я х/з как еще сказать...

Пешы скрип без ошибок

Странно, у меня ошибки не выдаются, просто нижняя часть кода не срабатывает по новому клику после того как окно выезжает вниз...

ps. Все-таки "есть" будущее у форумов, где можно спросить совета, а в ответ услышать - "исправляй ошибки"

Если все работало бы, то я бы и не спрашивал наверное.

ksa · #9 (**permalink**) 08.11.2013, 10:10

Сообщение от Chekist

ps. Все-таки "есть" будущее у форумов, где можно спросить совета, а в ответ услышать - "исправляй ошибки"

Если все работало бы, то я бы и не спрашивал наверное.

Да ты прям лингвист!

рони · #10 (**permalink**) 08.11.2013, 10:19

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript