Форум

hellbeast92 · #1 (**permalink**) 09.10.2013, 12:24

Всем здрасте, такая проблема:
есть два div-a:
<div class="d1">
<div class="d2"></div>
</div>
и функуия:
$('.d1').click(function(){
$(this).css({'display': 'none'}).transition({opacity: 0});
});
Вопрос: почему у div c классом d2 так же есть эта функция, каким, обазом она унаследовалась?
использую jq 2.0.3

mi.rafaylik · #2 (**permalink**) 09.10.2013, 13:53

1. Событие срабатывает сначала на самом вложенном элементе .d2, а потом всплывает до указанного селектора .d1
Читайте про всплытие событий для понимания происходящего.
2. Если изменяемый css-параметр всего один, то вместо массива .css({'display':'none'}) можно .css('display', 'none')
3. И конечно вместо .css({'display':'none'}) просто .hide()

hellbeast92 · #3 (**permalink**) 09.10.2013, 17:20

спасибо за ссылочку!

devote · #4 (**permalink**) 09.10.2013, 18:17

это:

$('.d1').click(function(){

заменить на:

$(document).on('click', '.d1', function(){

или если версия jQuery старая то:

$(document).delegate('.d1', 'click', function(){

hellbeast92 · #5 (**permalink**) 10.10.2013, 12:56

devote, мб я что-то делаю не так, но ваш метод не работает.

hellbeast92 · #6 (**permalink**) 10.10.2013, 13:12

нашел вот такое вот решение, не уверен что оно "правильно", но точно рабочее http://nazz.me/return-false-preventd...oppropagation/

devote · #7 (**permalink**) 10.10.2013, 13:13

Сообщение от hellbeast92

но ваш метод не работает.

когда вы кликаете по d2 вы так же кликаете и по d1 потому что d1 для d2 фактически является полотном. Что бы d1 не получал событие, его нужно прервать у d2. Для этого на d2 нужно повесить событие вида:

$('.d2').click(function(e){
    e.stopPropagation();
});

рони · #8 (**permalink**) 10.10.2013, 13:39

вариант ...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">.d1{height:100px;width:100px;background:#F00;border-radius:50px;border:solid 1px #000}
.d2{height:50px;width:50px;margin:25% auto;background:#000;border-radius:25px;border:solid 1px #000;color:#FFFFFF; text-align: center;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.d1').click(function(event){
 alert(event.target == this ? "Ok" : "No pasaran!")
 });
});
</script>
  <title></title>
</head>
<body>
<div class="d1">
 <div class="d2">d2</div>
 </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript