Я не знаю, является ли это мной, но у меня возникли некоторые проблемы с утилитой position () из jqueryui.
Иногда, когда элемент позиционируется с помощью jquery ui, события на нем не происходят.больше не работает!
Совершенно странно, что происходит только с некоторыми элементами, но я не могу найти общую точку.
У меня есть несколько кнопок, на которых я хочу изменить фон при наведении:
<div class="hidden" id="context">
<div class="move up"><span></span></div>
<div class="move down"><span></span></div>
<div class="move left"><span></span></div>
<div class="move right"><span></span></div>
</div>
ее css:
div.move {
position: absolute;
height: 40px;
width: 40px;
-webkit-box-shadow: #333 0px -3px 1px inset, white 0px 2px 1px inset, rgba(0, 0, 0, 0.4) 0px 3px 5px;
border-radius: 20px;
}
div.move span{
-webkit-transition: opacity 0.1s linear;
height: 40px;
width: 40px;
position:absolute;
-webkit-box-shadow: #333 0px -3px 1px inset, white 0px 2px 1px inset;
border-radius: 20px;
}
div.move span:hover{
opacity: 0;
}
div.move.left span{
background: url(images/left1.png) no-repeat;
}
div.move.left{
background: url(images/left-hover.png) no-repeat;
[...]
и наконец js:
$('div.move.left').position({
of: $('td.grid.current'),
my: 'center center',
at: 'left center',
offset: '-40px 0',
collision: 'none'
});
Даже если я использую события jquery, это не работает!
У кого-нибудь есть какое-нибудь решение?
РЕДАКТИРОВАТЬ: возможно, я получил его и, похоже, это ошибка !!!
После запуска приложения оно генерирует html в контейнере #contextСоздание основной таблицы и небольших таблиц для каждого тд основного:
<div class="" id="context">
<div class="move up" style="top: -60px; left: 505px; "><span></span></div>
<div class="move down" style="top: 780px; left: 505px; "><span></span></div>
<div class="move left" style="top: 360px; left: -20px; "><span></span></div>
<div class="move right" style="top: 360px; left: 1069px; "><span></span></div>
<table class="grids" style="position: relative; top: -618px; left: -539px; ">
<tbody>
<tr class="gridsRow">
<td class="grid current">
<div class="id">0</div>
<div class="gridTotal"></div>
<div class="close"><span class="hover"></span></div>
<table>
<tbody>
<tr class="cellsRow">
<td class="cell current">
<div class="id">0</div>
<label>0</label>
</td>
[...]
</div>
Все элементы, имеющие встроенные позиции, были обработаны функцией position () из jquery ui.Основной стол table.grids перемещается этим кодом:
$('table.grids').position({
my: 'left top',
at: 'center center',
of: $('#context'),
offset: '-1064px -998px'
});
Хорошо, проблема в этом куске кода.
Если я переместить стол.grid с помощью position () отключает обработку событий на кнопках .move
Если я удалю этот код, проблема исчезнет.Я думаю, что это своего рода ошибка.Я подумал, что, возможно, ошибка появится, если вы поместите () элемент против дочернего элемента другого элемента position ().Но незнакомец в том, что если I позиционировать () любой другой элемент против td.grid.current, ошибка не будет отображаться !это происходит только с кнопками .move!
Здесь я немного расскажу о приложении:
Сначала я объясню, как работает мое приложение.Это система, о которой я подумал, чтобы помочь мне подсчитать клетки на срезах мозга мыши, окрашенных иммуноферментной реакцией.
На экране у вас есть сетка ( td.grid ), в которую вы помещаетеколичество клеток.эта сетка сама является частью большой таблицы ( table.grids ), которая содержит множество маленьких сеток.Когда одна маленькая сетка заполнится, я хочу переключиться на соседние сетки, используя кнопки направления (например, move.up), которые перемещаются от текущей сетки ( td.grid.current ) к следующей.
Я использовал позицию jquery ui, чтобы зафиксировать ток td.grid.current в центре страницы, даже если вы изменили его размер, зафиксировав положение основного стола (table.grids) с определенным смещением по центру насетки.а затем я использовал position () также, чтобы зафиксировать кнопки относительно текущей сетки.