Первый опыт с jquery, как вызывать события по клику?

Question

[Павел Хрипунов]

* {
	margin: 0;padding: 0;
}
#c-tools {
	position:relative;
	height:100px;
	margin: 20px;
}
.c-form, .c-controls, #c-tools ul {
	position:absolute;
	top: 0;right: 0;
	height: 100%;
}
.c-controls, #c-tools ul {
	width: 100%;
}
.c-form {
	box-sizing:border-box;
	border:1px solid red;
}
#c-tools ul {
	list-style:none;
	overflow:auto;
}
#c-tools ul li, #c-tools .back {
	display: inline-block;
	float: left;
	height: 100%;
	box-sizing:border-box;
}

<div id="c-tools">
	<div class="c-controls">
    	<div class="back">назад</div>
    	<ul>
    		<li data-name="form1">1</li>
    		<li data-name="form2">2</li>
    		<li data-name="form3">3</li>
            <li data-name="form4">4</li>
    	</ul>
    </div>
    <div class="c-form">
    	<form id="form1">форма 1</form>
        <form id="form2">форма 2</form>
        <form id="form3">форма 3</form>
        <form id="form4">форма 4</form>
    </div>
</div>

var $container = $("#c-tools"); // ссылка на контейнер
var $c_form = $(".c-form"); // ссылка на контейнер с формами
var $c_controls = $(".c-controls"); // ссылка на контейнер с конпками
var $c_controls_list = $(".c-controls ul"); // ссылка на контейнер с конпками

var container_h = $container.height(); // высота контейнера
var container_w = $container.width(); // ширина контейнера
var controls_count = $c_controls_list.children("li").length; // кол-во кнопок меню

var back_butt_w = 30; // ширина кнопки назад

$c_controls_list.children('li').css("width", (100 / controls_count) + "%");


$c_form.css("display", "none");
$c_form.children("form").css("display", "none");
$c_controls.children(".back").css("display", "none");

$c_controls_list.children('li').click(function(){
	$("li", $c_controls_list).not(this).hide("fast");
	$(this).css({"margin-left":"5%","width":"15%"});
	$c_form.fadeIn("slow").css({"display":"block","width":"80%","float":"left"});
	var item_name = $(this).data("name");
	$c_form.children("#" + item_name).css("display", "block");
	$c_controls.children(".back").css({"display":"inline-block","width":"5%"});
});

$(".back").click(function() {
	alert("fgadfbdsv");
});

Проблема в том, что не работает alert. Не понимаю почему. Перелопатил кучу информации, и не нашел ответа. Помогите найти выход)

Answer 1

[pashted]

codepen.io/Pashted/pen/jrvVLw

просто .back находится за блоком, и он не кликается

Comments

[Павел Хрипунов]

точно, была у меня такая проблема, как не додумался)) спасибо)))

Answer 2

[Карен Мнацаканян]

У меня все работает prntscr.com/cuzsxz

<script type="text/javascript">
$(".back").click(function() {
  alert("fgadfbdsv");
});
</script>

<button class="back">back</button>
возможно в других строках js есть ошибка и из за этого не работает.

Comments

[Павел Хрипунов]

здесь весь код страницы, все работает, кроме alert