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>
|
в теории нужно добавить к селектору псевдоклас :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: я проверил, не только в теории, но и на практике тоже ;) |
На практике в вашем примере click вызывается только для id1, к сожалению. А нужно чтобы для каждого, но только один раз вызывался и для всех div.
В моём примере еще простая структура, в рабочем документе там по 4-5 вложений, соответственно по 4-5 раз вызывается click. |
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>
|
Цитата:
когда вы кликаете по любому елементу вы одновременно кликаете и по <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>
|
Убрав из корневого элемента класс myclass теперь он не кликается.
Нужно, чтобы все DIV'ы кликались по одному алгоритму. Один обработчик чтобы на всех был. |
Цитата:
<!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>
|
Вставил в обработчик 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>
|
| Часовой пояс GMT +3, время: 03:05. |