jQuery Добавить CSS для динамически добавляемых HTML-элементов

Question

Я добавляю новые элементы li & div на страницу с помощью функции jQuery .html(). Строка, которую я передаю, имеет жестко закодированный класс. Но он все еще не стилизован, хотя класс уже определен в файле CSS. Так что я добавил стиль с помощью функции jQuery .css(), но по-прежнему не использовал стиль. Как я могу добавить CSS для этих динамически добавляемых HTML-элементов?

for(i=0; i<directionList.length; i++) {
    html += "<li class='dir-list'> \
        <div class='dir-loc'><b>" + directionList[i].location + "</b></div><br  /> \
        <div class='dir-dest'> \
        <div class='dir-dest-icon'><img src='markers/new/transit-small.gif' class='dir-va-mid' title='by transit'/></div> \
        <div class='dir-dest-action'><span class='dir'>Ride to</span></div> \
        <div class='dir-dest-loc'><span class='dir'><b>" + directionList[i].destination + "</b></span></div> \
        <ul class='dir-routes'>";

    // add routes
    var routes = directionList[i].routes;
    for(j=0; j<routes.length; j++){
        html += "<li> \
            <div class='dir-route-type-icon'><img src='markers/new/" + routes[j].type + "-small.gif' class='dir-va-mid' title='" + routes[j].type + "'/></div> \
            <div class='dir-route-name'><span class='dir-va-mid' >" + routes[j].name + "</span></div> \
            </li>";
    }

    html += "</ul> \
        </div> \
        </li>";

    /*
    var index = parseFloat(i)+1;
    directions += "<li>" + directionList[i].location + "<span>";
    //get routes
    var routes = [];
    routes = directionList[i].routes;
    directions += "<ul>";
    for(j=0; j<routes.length; j++){
        directions += "<li>  (" + routes[j].type + ") " + routes[j].name + "</li>" ;
    }
    directions += "</ul>";
    directions +=  "</li>";
    */
}

html += "</ul>";
$('#directions').html(html);

CSS:

#directions div { 
    display:inline; 
    vertical-align:middle;
}
#directions ul#dir { 
    list-style:decimal;
}
#directions ul.dir-routes { 
    list-style: none;
}

.dir-va-mid {
    vertical-align:middle;
}

Добавление CSS с помощью силы:

$("#directions div").css({'display':'inline', 'vertical-align':'middle'});
$("#directions ul#dir").css({'list-style':'decimal'});
$("#directions ul.dir-routes").css({'list-style':'none'});
$(".dir-va-mid").css({'vertical-align':'middle'});

Редактировать : я включил свои файлы сюда . Пожалуйста, посмотрите на это, если у вас есть время.

Answer 1

Похоже, у вас проблема с CSS-спецификацией .

Чисто в качестве теста , чтобы увидеть, действительно ли это ваша проблема, вы должны удалитьваши jQuery .css() строк и добавьте !important к каждому объявлению в вашем CSS, например:

#directions div { 
    display: inline !important; 
    vertical-align: middle !important;
}
#directions ul#dir { list-style: decimal !important;}
#directions ul.dir-routes { list-style: none !important;}

.dir-va-mid {
    vertical-align: middle !important;
}

Если это работает, то вам нужно показать больше окружающего HTML , поэтому мы можем дать вам правильное решение , которое должным образом воспользуется преимуществами правил специфичности.

Вы не должны использовать !important для группированияпомощь, если нет другого пути.

Если он все еще не работает, то есть другая проблема, и вам, вероятно, все равно придется показать нам больше своего кода.

---

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

Тем не менее, я заметил одну вещь внутри вашего файла CSS , которая не подходит:

<![if lt IE 7]>
* html #outer{
    width:100%;/* box model hack for ie5.+*/
}
<![endif]>

Вы должны изменить это на:

* html #outer{
    width:100%;/* box model hack for ie5.+*/
}

• Условнокомментарии недопустимы внутри CSS-файла.
• Вы используете Star HTML-хак , который по определению будет применять стили только к IE менее 7.

Проверьте, не изменилось ли что-нибудь после исправления.