Ajax-ed в контенте не получает таблицу стилей? - PullRequest
Новая
       1

Ajax-ed в контенте не получает таблицу стилей?

0 голосов
/ 18 марта 2012

enter image description here

Я приложил скриншот двух страниц рядом. С левой стороны элемент формы в правом верхнем углу загружается как часть полной страницы и полностью стилизован с помощью стилей Bootstrap в твиттере для серого well, form-inline и т. Д.

Справа форма загружается с помощью вызова ajax, код: 

function load(element, id){
    $.get("/lazyLoads/" + id, function(data){
        $(element).replaceWith($(data.childNodes))
    })
}

И вы можете видеть, что форма не получает большинство стилей начальной загрузки. Помимо того, что это выглядит как собачья рвота, в Инспектирующем элементе вы можете ясно видеть, что он не соответствует большинству правил CSS Bootstrap.

самый ? Да, большинство , но не все: кажется, что оно соответствует стилю Bootstrap form, но, похоже, оно не подбирает стили .form-inline или .well! Страница довольно проста и HTML (почти) все для вас, чтобы увидеть. Кроме того, я не могу поместить курсор в текстовые поля, чтобы начать печатать на странице Ajaxed.

Помимо этой странности CSS, единственное отличие состоит в том, что на странице Ajaxed удалены теги <script>, как и следовало ожидать от вставки Jquery.

Это очень загадочно для меня. Протестировано в Chrome и Firefox с идентичным поведением. Также протестировано с insertBefore, before, insertAfter, after, каждый из которых имеет одинаковое поведение. Кто-нибудь знает, что может быть причиной этого?

РЕДАКТИРОВАТЬ: Все еще не удалось заставить демо работать (попытка развернуть приложение Play 2.0 не тривиально), но вот еще один симптом:

Если на правой странице (без стилей) на панели «Проверить элемент» я щелкаю правой кнопкой мыши тег <form>...</form> и выбираю [Изменить как HTML], не вносить никаких изменений и выходить из режима редактирования, стили сразу появляются и <form> внезапно выглядит как форма слева! Ясно, что HTML-код в порядке.

1 Ответ

0 голосов
/ 26 апреля 2012

CSS иногда НЕ будет применяться, если элемент имеет встроенные определения стиля.Вы можете придать своим определениям CSS более высокий приоритет, добавив! Важно к своим определениям.

Например: 

p {
   font-size: !important;
}

Кроме того, в вашем коде я не уверен, неправильно ли я понял имя функции"replaceWith ()". 

function load(element, id){
    $.get("/lazyLoads/" + id, function(data){
        $(element).replaceWith($(data.childNodes))
    })
}

Вместо этого попробуйте использовать следующий код: 

function load(element, id){
    $.get("/lazyLoads/" + id, function(data){
        $(element).html($(data.childNodes));
       //$(element).append($(data.childNodes));
    })
}
...