Блог

Я не знаю, я ли это, но у меня возникла некоторая проблема с 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 контейнере, создавая основную таблицу и небольшие таблицы для каждого td основного:

 <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. Основная таблица table.grids перемещается с помощью этого кода:

     $('table.grids').position({
        my: 'left top',
        at: 'center center',
        of: $('#context'),
        offset: '-1064px -998px'
    });
  

Хорошо, проблема в этом фрагменте кода.

Если я перемещаю table.grids с помощью position() , обработка событий на кнопках .move отключена

Если я удалю этот код, проблема исчезнет. Я думаю, что это своего рода ошибка. Я подумал, что, возможно, ошибка появляется, если вы position() используете элемент против дочернего элемента другого position() отредактированного элемента. Но самое странное в том, что если я position() применяю какой-либо другой элемент против, td.grid.current ошибка не отображается! это происходит только с .move кнопками!

Здесь я даю некоторое представление о приложении:

Сначала я объясню, как работает мое приложение. Я придумал эту систему, которая поможет мне подсчитывать клетки на срезах мозга мыши, окрашенных иммуноферментативной реакцией.

На экране у вас есть сетка (td.grid), в которую вы помещаете количество ячеек. эта сетка сама по себе является частью более крупной таблицы (table.grids), которая содержит много маленьких сеток. Как только одна маленькая сетка заполнится, я хочу переключиться на соседние сетки, используя кнопки направления (например, move.up), которые перемещаются от текущей сетки (td.grid.current) к следующей.

Я использовал jQuery ui position, чтобы зафиксировать td.grid.current в центре страницы, даже если вы измените ее размер, зафиксировав положение главной таблицы (table.grids) с определенным смещением к центру сетки. и затем я использовал position () также для фиксации кнопок относительно текущей сетки.

Если вы пытаетесь перемещаться по div, используйте
$('div.move.left').css(); или $('div.move.left').animate();

.position() не принимает никаких аргументов.

Документация:
.css(); — http://api.jquery.com/css /
.position(); — http://api.jquery.com/position /
.animate(); — http://api.jquery.com/animate /