Как работает событие клик?

Question

[urajo]

<div class="map">
			<svg viewBox="0 0 549.76001 257.28">
				<a href="#">
					<path class="part" d="m 253.73171,183.42984 54.74656,8.97485 0.38463,18.59075 -5.25669,6.53881 -56.54153,-9.10305 0.38464,-17.9497 z" description-data="<a href='#'>Первое отделение</a>" fill="#bf2523">
				</a>
			</svg>
			<div class="description">
			
			</div>
			<img src="img/map.png">
		</div>
	<script
	  src="https://code.jquery.com/jquery-3.4.1.min.js"
	  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	  crossorigin="anonymous">
	</script>
	<script src="js/main.js"></script>

.map img{
	width: 1200px;
}

.map{
	position: relative;
	text-align: center;
}

svg{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.part{
	opacity: 0.1;
}

.part:hover{
	transition: opacity 0.5s ease;
	opacity: 0.5;
}

.description{
	position: absolute;
	padding: 20px;
	box-sizing: border-box;
	width: 300px;
	height: 400px;
	box-shadow: 0 0 32px 10px #ccc;
	left: 50px;
	display: none;
}

$('.part').click(
	function(){
		$('.description').html($(this).attr('description-data'));
		$('.description').fadeIn();
	},
	function(){
		$('.description').fadeOut(50);
	}
)

Почему то при событие клик - не появляется окно, при этом при событии ховер все работает, в чем проблема?

Comments

[Kovalsky]

Используйте on, это сэкономит вам много нервов:

$element.on('click', handlerFunction);

Конкретно по вашему примеру: я представления не имею что вы планировали получить передав две функции в click

[urajo]

я хотел что бы по второму клику скрывалось окно. Как должно быть тогда реализовано т.к с ховером все так работает

[Леонид Тючкалов]

Если правильно понял, то вы после показа элемента сразу скрываете его
$('.description').fadeIn();
},
function(){
$('.description').fadeOut(50);
}

[urajo]

Леонид Тючкалов, так а как его не сразу скрыть а при втором клике?

[Леонид Тючкалов]

urajo, вот такой пример:
$( "#target" ).dblclick(function() {
alert( "Handler for .dblclick() called." );
});

Answer 1

[htmldiz]

Ну вопервых в ссылке не используется href а пишется xlink:href.
Во вторых: click не может так работать так как у него синтаксис другой.
Вот пример рабочего синтаксиса:
$('body').on('click','.part',function(){
$('.description').html($(this).attr('description-data'));
$('.description').fadeIn();
});
Но в данном случае необходимо использовать понятие data state так как вы не знаете текущего состояния открыто или нет:

$('body').on('click','.part',function(){
var is_display = typeof $(this).data('is_display') != 'undefined' ? $(this).data('is_display') : false;
if(is_display == false){
$('.description').html($(this).attr('description-data'));
$('.description').fadeIn();
$(this).data('is_display',true);
}else{
$('.description').fadeOut(50);
$(this).data('is_display',false);
}
});

Answer 2

[leni_m]

может через toggleClass?

$('.part').click(function(){
    // добавляем-убираем класс при клике
    $(this).toggleClass("tumble");
    // если одно из двух
    if($(this).hasClass("tumble")) {
        // одни действия
    } else {
        // другие действия
    }
});

Comments

[htmldiz]

А зачем модифицировать дом для этого?

[leni_m]

htmldiz, аналогичный вопрос, или дата-атрибуты уже не дом?