Как подружить selectable и click() по элементу?
Добрый вечер!
Есть такой кусок html-кода:
<div class="row-directories">
<div class="directory"></div>
<div class="directory"></div>
<div class="directory"></div>
</div>
И такой кусок js-кода:
$('.row-directories').selectable({
filter: ".directory"
}).on('click', '.directory', function() {
alert('Click.');
});
В данном случае selectable срабатывает (при клике на элемент совершается его выделение), но мой обработчик, который я повесил на клик по этому элементу, напрочь игнорируется. Вопрос: как мне их подружить? Чтобы срабатывало и выделение элемента, и мой обработчик клика. |
Magician Anthony,
вы что-то не договариваите ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<style>
.row-directories .ui-selecting { background: #FECA40; }
.row-directories .ui-selected { background: #F39814; color: white; }
</style>
<script>
$(function() {
$('.row-directories').selectable({
filter: ".directory"
}).on('click', '.directory', function() {
alert('Click.');
});
});
</script>
</head>
<body>
<div class="row-directories">
<div class="directory">1</div>
<div class="directory">2</div>
<div class="directory">3</div>
</div>
</body>
</html>
|
Вы мне не поверите, но у меня срабатывает только в том случае, когда я на этом элементе выделяю кусок (этого же элемента) в правую сторону. То есть клик срабатывает не при клике, а при выделении области на этом элементе. А тут, на форуме, работает без проблем. Не подскажете, чем может быть вызвана данная проблема?
|
Magician Anthony,
другой код мешает ... без проблемного примера, можно только гадать |
В общем, проблема была в jquery-ui.css, который мешал этому. Вернее, класс ui-selectable-helper, который отвечает за выделение области. Если удалить этот класс, то клики нормально одновременно работают. Если добавить стиль обратно - так, как я написал. В чём может быть дело?
Вот ссылка на пример - https://jsfiddle.net/d9hj8qfb/ Вначале попробуйте клик, а потом выделите область вправо на самом элементе. |
Magician Anthony,
добавить в css
.ui-selectable-helper{
z-index: -100;
}
|
рони,
Тогда области выделения не видно, хоть и работает. |
Magician Anthony,
:) тогда так
.ui-selectable-helper{
margin-left: 9px;
}
|
рони,
Тогда уже margin-left: 1px; :-) --- Спасибо большое за помощь) Странная проблема, правда. |
| Часовой пояс GMT +3, время: 09:55. |