отступы отступы JQuery селектор? - PullRequest
Новая
       10

отступы отступы JQuery селектор?

0 голосов
/ 29 октября 2009

Этим утром я потратил 2 часа, пытаясь выяснить, почему моя функция jQuery работает в одной части страницы, а не в другой.

Я наконец сузил его до вертикального заполнения контейнера.

Если бы это было в моем CSS: 

div.collapsiblePanel {
padding: 0px 1%;
}

затем с помощью jQuery я могу найти родительский элемент (.collapsiblePanel) и перейти в этот div и манипулировать дочерними элементами. Однако, если я изменю только одну вещь в моей таблице стилей на это: 

div.collapsiblePanel {
padding: 5px 1%;
}

Тогда jQuery может найти родителя (.collapsiblePanel), но не может пройти через потомков.

Сумасшедший, верно? Какие-нибудь теории относительно того, что происходит? Я бился головой об этом, думая, что это должно быть что-то с моим jQuery, но в конечном итоге это была проблема CSS.

По запросу, еще несколько фрагментов разметки / css / code:

Специальная функция jQuery, которая (казалось бы) не работала: 

function finishUp(ajaxContainer,originalContainer,loadingAlert) {  
    $(ajaxContainer).find("input.btnSave").css("border","3px solid red");
    var saveButtonn = $(ajaxContainer).find("input.btnSave");
    console.log(ajaxContainer);
    console.log(originalContainer);
    console.log(loadingAlert);
    console.log(saveButton);
    $(ajaxContainer).find("input.btnSave").css("border","3px solid red").click(function(){
        alert("you clicked the save button");
        savePanel($(this));
    });

};

Что происходит после того, как предыдущие функции загружают контент через AJAX, а затем отображают контейнер, эта функция входит и присоединяет событие нажатия кнопки.

Как вы видите, у меня есть куча дополнительного кода для регистрации. Когда мой вертикальный отступ CSS установлен на «0», Firebug регистрирует правильное имя объекта каждого из них. Когда я изменяю свой CSS вертикальный отступ на что-то еще, последний объект (saveButton) возвращается как пустой / пустой в Firebug.

HTML: 

<div class="ajaxEditPanel editablePanel collapsiblePanel" style="display: block;">       
    <form>
         <fieldset class="sideLabels dividers">
         <legend>Edit Realtionship Information</legend>

              ...the form...
                <div class="formItem formButtons"
                    <input value="save" class="button btnSave" type="button">
                    <input value="cancel" class="button btnCancel" type="button">
                </div>                    
         </fieldset>        
    </form>
 </div>

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

1 Ответ

0 голосов
/ 31 октября 2009

Я полагаю, что раньше я сталкивался с чем-то похожим на это - это может быть проблема с синхронизацией, когда DOM будет визуализирован после того, как JS будет сказано связываться с элементами. В вашем случае заполнение может заставить firefox отрисовывать эти div s на несколько миллисекунд дольше и, следовательно, вызывать срабатывание привязки до того, как будет что-либо связываться. Я понимаю, что Firebug также может замедлять процесс рендеринга, так как он подключается в точках для визуализации источника в своем фрейме.

Чтобы подтвердить, что это не так, попробуйте добавить setTimeout(function(){ ... }, 500) вокруг вашего кода привязки (также, возможно, выключить firebug), чтобы увидеть, будет ли он связываться после этого. Если это так, то есть ваша проблема.

Другой подход может состоять в том, чтобы преобразовать ваши входные данные в ссылки и использовать делегирование события для запуска события: jQuery('.btnSave').live('click', function(){savePanel($('selector>for>panel')); })

...