Скорее всего мой случай очень простой, но я уже несколько дней ломаю голову)
Я использую метод 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>