VPF::Люди, помогите, пожалуйста с обработчиком

Макsim

Дата 7.2.2016, 21:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 7.2.2016

Репутация: нет
Всего: нет

Скорее всего мой случай очень простой, но я уже несколько дней ломаю голову)
Я использую метод on() потому что элементы, которые слушают событие, должны так же слушать события
на других элементах, поэтому addEventListener здесь не катит. Подскажите, пожалуйста, как сделать
чтобы обработчик срабатывал постоянно?
Вот то, о чем я говорю - обработчик срабатывает, к сожалению, только два раза:
$('#wrapper').children().children().on("click", "div.listener", function(e) {
            $( "div.listener" ).css("display", "none");
            $( "#clicker" ).bind("click", function(e) {
                $( "div.listener" ).css("display", "block");
                })
        });
    $( "#clicker" ).bind("click", function(e) {
        $( "div.listener" ).trigger("click");
        });
Вот весь код целиком - можно запустить для наглядности:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    var allFormBlocks = document.getElementsByClassName("formblock");
    var hiddenArr = $(allFormBlocks);
    hiddenArr.slice(1).hide();

    $("div.listener").css("color", "red");

    $('#wrapper').children().children().on("click", "div.listener", function(e) {
            $( "div.listener" ).css("display", "none");
            $( "#clicker" ).bind("click", function(e) {
                $( "div.listener" ).css("display", "block");
                })
        });
    $( "#clicker" ).bind("click", function(e) {
        $( "div.listener" ).trigger("click");
        });

    $('#button1').bind("click", function(e){//конец блока1 следующий раздел
                            $('#block1').hide();
                            $('#block2').show();
                            });


    $('#button2').bind("click", function(e){//конец блока2 следующий раздел
                            $('#block2').hide();
                            $('#block3').show();
                            });

    $('#button3').bind("click", function(e){//конец блока2 предыдущий раздел
                                $('#block2').hide();
                                $('#block1').show();
                                });
    $('#button4').bind("click", function(e){//конец блока3 предыдущий раздел
                                $('#block3').hide();
                                $('#block2').show();
                                });
});

</script>
</head>
<body>

<div id="wrapper">
    <div class="testform">
        <form method="POST" name="form">

                <div class="formblock" id="block1">
                    <h1>Это блок №1</h1>
                    <div>
                    <p><label><input id="clicker"  type="checkbox" name="npo" value="0">скрыть некоторые элементы<label></p>
                    </div>
                    <div>DIV блока №1</div>
                    <div class="listener">Это тоже DIV блока №1</div>
                    <div>и это тоже DIV блока №1</div>
                    <button type="button" id="button1">следующий раздел</button>
                </div>
                <div class="formblock" id="block2">
                    <h1>Это блок №2</h1>
                    <div>DIV блока №2</div>
                    <div class="listener">Это тоже DIV блока №2</div>
                    <div>и это тоже DIV блока №2</div>
                    <button type="button" id="button2">следующий раздел</button></br>
                    <button type="button" id="button3">предыдущий раздел</button>
                </div>
                <div class="formblock" id="block3">
                    <h1>Это блок №3</h1>
                    <div>DIV блока №3</div>
                    <div class="listener">Это тоже DIV блока №3</div>
                    <div>и это тоже DIV блока №3</div>
                    <button type="button" id="button4">предыдущий раздел</button>
                </div>
        </form>
    </div>
</div>
</body>
</html>

ksnk

Дата 8.2.2016, 00:57 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Пожалуйста, отредактируй свой пост. Код на разных языках можно форматировать кнопкой "Код" редактора.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »