Люди, подскажите, пожалуйста как сделать обработчик js
Максим Иванов

Мой случай, наверное, простой, но я уже несколько дней не могу с ним разобраться... Я использую метод on() потому что элементы, которые слушают событие, должны так же слушать события и на других элементах, поэтому вариант addEventListener здесь не катит.
Вот то, в чем заключается вопрос - обработчик срабатывает только 2 раза:
$('#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>

Максим Иванов больше 1 года назадСпасибо 0
0 чел.