Menu
Sure, my case is very simple, but I cant understand it and crush my head several days))
I use method on(), because the elements, which must to listen the event, also must to listen the events on other elements. So the addEventListener is unsuitable here. Say me, please, how make the constantly working handler?
Here thats, about I talking – the handler works two times only:
$(‘#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”);
});
Here the all code – may to do testing for clarity:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “
<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>
Help @__1052___1072___1082_si__1084_ spread the word by sharing this article on Twitter...
Tweet This