Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.05.2015, 13:09
Аспирант
Отправить личное сообщение для SKLNSK Посмотреть профиль Найти все сообщения от SKLNSK
 
Регистрация: 27.02.2015
Сообщений: 66

click вызывается несколько раз
Как сделать чтобы click вызывался только на верхнем элементе?
Смотрим пример!

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0 class=myclass>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>

	$('.myclass').click(function(){
		alert('id= '+$(this).attr('id'));
	});
	
</script>

</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 29.05.2015, 13:16
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

в теории нужно добавить к селектору псевдоклас :first-child (если не ошибаюсь)
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>

	$('.myclass:first-child').click(function(){
		alert('id= '+$(this).attr('id'));
	});
	
</script>

</body>
</html>


PS: я проверил, не только в теории, но и на практике тоже

Последний раз редактировалось KosBeg, 29.05.2015 в 13:18.
Ответить с цитированием
  #3 (permalink)  
Старый 29.05.2015, 13:25
Аспирант
Отправить личное сообщение для SKLNSK Посмотреть профиль Найти все сообщения от SKLNSK
 
Регистрация: 27.02.2015
Сообщений: 66

На практике в вашем примере click вызывается только для id1, к сожалению. А нужно чтобы для каждого, но только один раз вызывался и для всех div.

В моём примере еще простая структура, в рабочем документе там по 4-5 вложений, соответственно по 4-5 раз вызывается click.
Ответить с цитированием
  #4 (permalink)  
Старый 29.05.2015, 13:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

SKLNSK,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0 class=myclass>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>
	$('.myclass').click(function(){
	var ok = !$(this).parents('.myclass').length;
	    ok &&	alert('id= '+$(this).attr('id'));
	});

</script>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 29.05.2015, 13:29
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

Сообщение от SKLNSK
<div id=id0 class=myclass>
<div id=id1 class=myclass>
<br>
1111111111<br>
</div>
<div id=id2 class=myclass>
<br>22222222222<br>
</div>
<br>Какой-то текст<br>
</div>
ошибка тут,
когда вы кликаете по любому елементу вы одновременно кликаете и по <div id=id0 class=myclass>, тоесть кликаете по елементу с класом myclass ДВАЖДЫ, я в своем примере выправил эту ошибку
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>

	$('.myclass').click(function(){
		alert('id= '+$(this).attr('id'));
	});
	
</script>

</body>
</html>

Последний раз редактировалось KosBeg, 29.05.2015 в 13:36.
Ответить с цитированием
  #6 (permalink)  
Старый 29.05.2015, 13:40
Аспирант
Отправить личное сообщение для SKLNSK Посмотреть профиль Найти все сообщения от SKLNSK
 
Регистрация: 27.02.2015
Сообщений: 66

Убрав из корневого элемента класс myclass теперь он не кликается.

Нужно, чтобы все DIV'ы кликались по одному алгоритму. Один обработчик чтобы на всех был.
Ответить с цитированием
  #7 (permalink)  
Старый 29.05.2015, 13:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от SKLNSK
Как сделать чтобы click вызывался только на верхнем элементе?
пост 4 не подошёл разве? или вам нужно всплытие отменить?
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0 class=myclass>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>
	$('.myclass').click(function(event){
        event.stopPropagation();
	    alert('id= '+$(this).attr('id'));
	});

</script>

</body>
</html>

Последний раз редактировалось рони, 29.05.2015 в 13:49.
Ответить с цитированием
  #8 (permalink)  
Старый 29.05.2015, 13:49
Аспирант
Отправить личное сообщение для SKLNSK Посмотреть профиль Найти все сообщения от SKLNSK
 
Регистрация: 27.02.2015
Сообщений: 66

Вставил в обработчик return false; Заработало!
Перелопатил кучу инета, сам догадался )

Вот пример:
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body{
   height: 150px;
   background-color: #FFCC66;
 }

  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>

<div id=id0 class=myclass>
	<div id=id1 class=myclass>
		<br>
		1111111111<br>
	</div>
	<div id=id2 class=myclass>
		<br>22222222222<br>
	</div>
	<br>Какой-то текст<br>
</div>

<script>

	$('.myclass').bind('click',function(){
		alert('id= '+$(this).attr('id'));
		return false;
	});
	
</script>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сменить обработчик click floa Events/DOM/Window 2 06.08.2012 11:22
Обработчик click вызывается несколько раз или не всегда вызывается OlegJquery jQuery 2 21.07.2011 20:37
Несколько созданных элементов располагаются в одной строке. Как этого избежать? Hold Events/DOM/Window 1 21.01.2011 23:52
live click выполняется несколько раз hara jQuery 9 09.06.2010 10:58
Чтоб ссылка появлялась один раз для каждого пользователя (по IP или Cookies) Sequoia Общие вопросы Javascript 2 28.01.2010 19:16