Используется с $.post Jquery и стилями в HTML

#php #javascript #jquery

Вопрос:

У меня есть базовый скрипт jquery, возвращающий для меня некоторый HTML-код. Код приведен ниже:

 <script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(){

    $.post('libraries/content.php', function(data){
        $('#content').html(data);
    });
  });
});
</script>

Скрипт возвращает html, который хранится в content.php , но к нему не применяется никакого стиля.

В принципе, у меня есть ссылка с надписью «показать больше контента», которая показывает выпадающий список, который хранится в content.php (php-скрипт заполняет выпадающий список, поэтому он находится в отдельном файле), но я понятия не имею, почему выпадающий список не оформлен.

Есть предложения?

Спасибо,

Грегор

1. ваш код кажется нормальным. чтобы мы могли вам помочь, пожалуйста, выполните одно из следующих действий: a. разместите соответствующую таблицу стилей b. попробуйте проверить недавно добавленный стиль html с помощью firebug style inspector, возможно, вы обнаружите что-то, что пропустили…

2. Где и как вы определяете стили? И какие стили? (поскольку стили, доступные в выпадающих списках, довольно ограничены)

3. Есть 8 таблиц стилей! Я определяю таблицу стилей в all.css (и импортирую их), ссылка на которую приведена в заголовке документа.

4. Кроме того, если я включу HTML, который находится в content.php тогда стили будут в порядке непосредственно на странице. Это происходит только тогда, когда я пытаюсь загрузить его через приведенный выше скрипт

Ответ №1:

Попробуйте использовать функцию $.load. Пример:

 $("#content").load("libraries/content.php");

Ответ №2:

когда вы говорите выпадающий список, вы имеете в виду <select> элемент?

если вы используете браузер webkit (google Chrome, safari), то оформление <select> полей — занятие не из приятных.

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

другой способ проверить это — добавить background-color:blue;font-size:30px; к <select> стилю поля (webkit нужны комбинации стилей, только изменение размера шрифта будет проигнорировано).

и третий способ проверить: протестируйте его в firefox. он более серьезно относится к стилям в полях формы.

1. p.s. откройте эту страницу в safari / chrome, чтобы увидеть, как иногда стили css в выпадающих списках просто игнорируются: particletree.com/examples/safari3/drop.html

2. Стиль, который у меня есть в раскрывающемся списке, работает во всех браузерах (ie7 , FF и всех браузерах webkit). Я разрабатываю в FF.

3. хм … не то, что я ожидал тогда. можете ли вы сузить свою проблему, чтобы она выполнялась в jsfiddle.net ? (вы можете без проблем перенести $.post в другой домен)