Форум

Magician Anthony · #1 (**permalink**) 14.01.2017, 19:09

Добрый вечер!
Есть такой кусок 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 срабатывает (при клике на элемент совершается его выделение), но мой обработчик, который я повесил на клик по этому элементу, напрочь игнорируется. Вопрос: как мне их подружить? Чтобы срабатывало и выделение элемента, и мой обработчик клика.

рони · #2 (**permalink**) 14.01.2017, 19:39

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 · #3 (**permalink**) 14.01.2017, 21:27

Вы мне не поверите, но у меня срабатывает только в том случае, когда я на этом элементе выделяю кусок (этого же элемента) в правую сторону. То есть клик срабатывает не при клике, а при выделении области на этом элементе. А тут, на форуме, работает без проблем. Не подскажете, чем может быть вызвана данная проблема?

рони · #4 (**permalink**) 15.01.2017, 01:39

Magician Anthony,
другой код мешает ... без проблемного примера, можно только гадать

Magician Anthony · #5 (**permalink**) 15.01.2017, 12:48

В общем, проблема была в jquery-ui.css, который мешал этому. Вернее, класс ui-selectable-helper, который отвечает за выделение области. Если удалить этот класс, то клики нормально одновременно работают. Если добавить стиль обратно - так, как я написал. В чём может быть дело?
Вот ссылка на пример - https://jsfiddle.net/d9hj8qfb/
Вначале попробуйте клик, а потом выделите область вправо на самом элементе.

рони · #6 (**permalink**) 15.01.2017, 13:41

Magician Anthony,
добавить в css

.ui-selectable-helper{
  z-index: -100;
}

Magician Anthony · #7 (**permalink**) 15.01.2017, 13:43

рони,
Тогда области выделения не видно, хоть и работает.

рони · #8 (**permalink**) 15.01.2017, 13:46

Magician Anthony,

тогда так

.ui-selectable-helper{
   margin-left: 9px;
}

Magician Anthony · #9 (**permalink**) 15.01.2017, 15:01

рони,
Тогда уже margin-left: 1px; :-)
---
Спасибо большое за помощь) Странная проблема, правда.

Форум

Справочник

Discord чат

Курсы javascript