<li expanded="true" perm="3" mid="1">
<div class="perm_icons">
<img class="btn" title="Доступность" src="public_icons/checkbox_yes.png" chperm="1">
<img class="btn" title="Чтение" src="public_icons/checkbox_yes.png" chperm="2">
<img class="btn" title="Создание" src="public_icons/checkbox_no.png" chperm="4">
<img class="btn" title="Редактирование" src="public_icons/checkbox_no.png" chperm="8">
<img class="btn" title="Удаление" src="public_icons/checkbox_no.png" chperm="16">
</div>
<span class="label_main">users</span>
<br>
<img src="public_icons/arrow_up.png" class="btn expand" term="expand">
<span class="label_note">юююююююю</span>
</li>
Странность восприятия клика браузером
Удивительную вещь сейчас наблюдаю в двух радикально различных браузерах.
функ в jQuery выглядит так:
Нуль реакции. Трасса показывает, что кликаю я по div.perm_icons а вовсе не по img.
Что это за беда, и как с этим бороться? Видимо, я или совсем пьяный, или чего-то совсем тупой… (одно другого не исключает :D)
Код:
функ в jQuery выглядит так:
Код:
$("div.perm_icons img").click(function(){
alert('ushfisdhvi');
});
alert('ushfisdhvi');
});
Нуль реакции. Трасса показывает, что кликаю я по div.perm_icons а вовсе не по img.
Что это за беда, и как с этим бороться? Видимо, я или совсем пьяный, или чего-то совсем тупой… (одно другого не исключает :D)
а jQuery воспринимает такие селекторы?
Я с этим фреймворком только начал знакомство, но с подобными селекторами уже были завтыки..
приходилось делать так
Код:
$("div.perm_icons img")
Я с этим фреймворком только начал знакомство, но с подобными селекторами уже были завтыки..
приходилось делать так
Код:
$("div.perm_icons").find('img');
Lone Wolf, нормально воспринимает.
Кстати, что характерно, даже если я напишу $("img").click(<и далее по расписанию>) - всё равно получется, что кликаю по parent-блоку. Прямо порча какая-то! И в FF и в IE.
Кстати, что характерно, даже если я напишу $("img").click(<и далее по расписанию>) - всё равно получется, что кликаю по parent-блоку. Прямо порча какая-то! И в FF и в IE.
хм..
вожможно оно так и есть
например в прототайпе я так бы и делал.
вешал клик на div, а в обработчике смотрел реальный елемент по которому кликнули.
так лучше ,чем вешать 100 обработчиков на каждую картинку.
вожможно оно так и есть
например в прототайпе я так бы и делал.
вешал клик на div, а в обработчике смотрел реальный елемент по которому кликнули.
так лучше ,чем вешать 100 обработчиков на каждую картинку.
Код:
$('div.perm_icons').observe('click',function(event) {
if( event.findElement('img'))
alert('!!');
});
if( event.findElement('img'))
alert('!!');
});
ФБ стоит? посмотри что есть target и что eсть currentTarget
По идее, currentTarget - будет div,
а target - нужный img
По идее, currentTarget - будет div,
а target - нужный img
Код:
$("div.perm_icons img").click(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
console.log(event.target);
console.log(event.currentTarget);
});
Мозилла 3.6.3, jQuery 1.3.2
Сваяный на скорую руку для проверки код:
Полет нормальный. В смысле, log показывает, что кликается img.
Попробуйте мб в селекторе сделать "div.perm_icons > img". Тут, возможно, проблема или баг jQuery. Сам когда-то сидел над одной задачей (связанной с display), а вызванно все было багой в библиотеке.
Сваяный на скорую руку для проверки код:
Код:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="perm_icons">
<img class="btn" title="Доступность" src="public_icons/checkbox_yes.png" chperm="1">
<img class="btn" title="Чтение" src="public_icons/checkbox_yes.png" chperm="2">
<img class="btn" title="Создание" src="public_icons/checkbox_no.png" chperm="4">
<img class="btn" title="Редактирование" src="public_icons/checkbox_no.png" chperm="8">
<img class="btn" title="Удаление" src="public_icons/checkbox_no.png" chperm="16">
</div>
<span class="label_main">users</span>
<br>
<img src="public_icons/arrow_up.png" class="btn expand" term="expand">
<span class="label_note">юююююююю</span>
<script type="text/javascript">
$("div.perm_icons img").click(function(){
console.log(this);
//alert('ushfisdhvi');
});
</script>
</body>
</html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="perm_icons">
<img class="btn" title="Доступность" src="public_icons/checkbox_yes.png" chperm="1">
<img class="btn" title="Чтение" src="public_icons/checkbox_yes.png" chperm="2">
<img class="btn" title="Создание" src="public_icons/checkbox_no.png" chperm="4">
<img class="btn" title="Редактирование" src="public_icons/checkbox_no.png" chperm="8">
<img class="btn" title="Удаление" src="public_icons/checkbox_no.png" chperm="16">
</div>
<span class="label_main">users</span>
<br>
<img src="public_icons/arrow_up.png" class="btn expand" term="expand">
<span class="label_note">юююююююю</span>
<script type="text/javascript">
$("div.perm_icons img").click(function(){
console.log(this);
//alert('ushfisdhvi');
});
</script>
</body>
</html>
Полет нормальный. В смысле, log показывает, что кликается img.
Попробуйте мб в селекторе сделать "div.perm_icons > img". Тут, возможно, проблема или баг jQuery. Сам когда-то сидел над одной задачей (связанной с display), а вызванно все было багой в библиотеке.
он вообще молчит на это событие. вот на всём остальном реагирует, даже какие-то варнинги показывать норовит, а по клику на этой хрени делает вид, что ничего не случилось. собственно, ничего и не случается.
я в панике, я схожу с ума!…
я в панике, я схожу с ума!…
хм.. z-index, position ?
мож весь код вместе с ксс-ом поможет понять?
мож весь код вместе с ксс-ом поможет понять?
я уже пробовал всё поотключать в CSS. первая мысль такая и была, что опять с маргинами намудрил, как это бывает в IE. Ан нет…
Собственно, вот их стили:
UPD. Да, забыл. Из-за этого я изначально всполошился. В CSS я вообще не силён, вот и подумал: мало-ли. Но нет, это тоже не при делах.
Собственно, вот их стили:
Код:
ul.perms{list-style-type: none; padding-left: 20px;}
ul.perms li{
border: 1px dotted black;
margin-bottom: 3px;
padding: 2px 4px;
}
ul.perms li:hover{background-color: #c8e2ea;}
.perm_icons{
width: 130px;
height: 24px;
border: 0px solid black;
margin-top: 6px;
}
.perm_icons img{width: 16px; height: 16px; margin-left: 2px;}
.btn{cursor: pointer; padding-right: 4px; vertical-align: middle;}
ul.perms li{
border: 1px dotted black;
margin-bottom: 3px;
padding: 2px 4px;
}
ul.perms li:hover{background-color: #c8e2ea;}
.perm_icons{
width: 130px;
height: 24px;
border: 0px solid black;
margin-top: 6px;
}
.perm_icons img{width: 16px; height: 16px; margin-left: 2px;}
.btn{cursor: pointer; padding-right: 4px; vertical-align: middle;}
UPD. Да, забыл. Из-за этого я изначально всполошился. В CSS я вообще не силён, вот и подумал: мало-ли. Но нет, это тоже не при делах.
Код:
.perm_icons{float: right;}
1) Попробуй для блока perm_icons прописать сначала position:relative, если не поможет пропиши display:inline-block
2) Вместо картинок лучше использовать блоки которым задан фон в виде этих самых картинок. И соответственно обработчик события на них вешать:
Проблема тут абсолютно точно в позиционировании и верстке. Видел бы полностью страницу - сказал бы точнее.
2) Вместо картинок лучше использовать блоки которым задан фон в виде этих самых картинок. И соответственно обработчик события на них вешать:
Код:
$("div.perm_icons div").bind("click", function(){
alert('ushfisdhvi');
});
alert('ushfisdhvi');
});
Проблема тут абсолютно точно в позиционировании и верстке. Видел бы полностью страницу - сказал бы точнее.
я уже попробовал вообще вынести их из блока. просто в линеечку выписал прямо в li. Хрен! Тоже не работают!!!! Так что, тема уже совсем не об том пошла. Налицо что-то иное. Уже побуквенно перечитал код, Смотрю DOM. Вот это самая страння штука: Вроде как есть event.click, а вроде как и нет. Такое ощущение, что DOM его вообще за текст считает, но картинки показывает, зараза. мистика какая-то творится.
UPD. Да, стили вообще отключил. Такая же беда.
UPD. Да, стили вообще отключил. Такая же беда.
Ну да, лошара я чилийский. Учиться и учиться ещё на своих и чужих ошибках.
$("div.perm_icons img").live("click", function(){ <что-то там> }); - отлично работает!
$("div.perm_icons img").live("click", function(){ <что-то там> }); - отлично работает!
Ну если работает через live() значит либо что-то неверно организовано в коде, либо вы не все нам рассказали в вопросе (например что код этот подгружается через ajax или генерится на лету на основе действий пользователя).
Вот я тоже запоздало подумал, когда осознал тупость происходящего, что самое шило-то и не поведал: картинки (<img>) на лету (браузером) на основании данных, получаемых от серванта создаются. Совершенно не подумал, что я просто буквы вставляю, а не объекты. А когда подумал - уж поверьте волосы на заднице рвал ))))))))))))))
Извините, товарищи, а кто не извиняет - набейте мне минусов побольше, чтобы впредь чеболданом думал, а не сувался по-пустякам на форум воспрошать )))))
Извините, товарищи, а кто не извиняет - набейте мне минусов побольше, чтобы впредь чеболданом думал, а не сувался по-пустякам на форум воспрошать )))))
Цитата:
А когда подумал - уж поверьте волосы на заднице рвал )))
Ну зато теперь в преддверии лета будет не так жарко))