Добавление класса к динамически добавляемым элементам с помощью функции jQuery в ie8

0

Попробовали несколько вариантов, не повезло. Я использую jQuery 1.9.1

Вот мой код функции:

(function ($) {
    $.fn.createGallery = function(options) {
        var theObject = $(this);
        var settings = $.extend({
            // These are the defaults.
            server: 'http://localhost/jQuery%20Gallery/images/galleries/',
            galleryName: 'Test',
            galleryWidth: 800,
            galleryImageMargin: 20,
            galleryImageColumns: 2,
            galleryTargetFolder: 'homepage_gallery',
            imageQuality: 100
        }, options);

        var galleryImageWidth = settings.galleryWidth / settings.galleryImageColumns;
        var imageUrl = settings.server+settings.galleryTargetFolder;

        var otherMargin = Math.round(settings.galleryImageMargin / 2);
        var finalImageWidth = Math.round(galleryImageWidth - settings.galleryImageMargin);
        var finalImageHeight = Math.round(galleryImageWidth / 1.4);
        var finalGalleryWidth = settings.galleryWidth - settings.galleryImageMargin;

        $(this).before('<style>'+$(this).selector+' li:nth-child('+settings.galleryImageColumns+'n+1) { margin-left: 0; } '+$(this).selector+' li:first-child { margin-left: 0; } '+$(this).selector+' { width: '+finalGalleryWidth+'px; margin: 0px; } '+$(this).selector+' li { display: inline-block; list-style: none; margin-left: '+settings.galleryImageMargin+'px; margin-bottom: '+otherMargin+'px; } </style>');

        $.ajax({
            url: imageUrl,
            success: function(data){
                var extension = '.jpg';
                $(data).find("a:contains("+extension+")").each(function(){
                    // will loop through 
                    var filename = $(this).attr("href");
                    $('<li></li>').html('<a href="'+imageUrl+'/'+filename+'" class="fancybox"><img src="thumbnail.php?src='+imageUrl+'/'+filename+'&q='+settings.imageQuality+'&h='+finalImageHeight+'&w='+finalImageWidth+'"/></a>').appendTo(theObject);
                });
            }
        });

    };
}(jQuery));

Это называется так и отлично работает: HTML: <ul id="images"></ul>

JQuery:

$('#images').createGallery({
    server: 'http://localhost/jQuery%20Gallery/images/galleries/',
    galleryName: 'Test',
    galleryWidth: 800,
    galleryImageMargin: 20,
    galleryImageColumns: 2,
    galleryTargetFolder: 'homepage_gallery',
    imageQuality: 100
});

Теперь, что я хочу сделать, это добавить класс к новым элементам, чтобы я мог настроить их в ie8, чтобы добавить к нему класс. Я пробовал это:

$(document).on('DOMNodeInserted', function(e) {
    $(e.target).addClass('triggerMargin');
});

Который я разместил в нижней части функции, и он отлично работает в firefox и chrome и т.д., Но он полностью игнорируется в ie8. Есть идеи?

  • 0
    Какая версия jQuery реализована? В jQuery 2.x прекращена поддержка IE <9.
  • 0
    Я использовал 1.9.1
Показать ещё 6 комментариев
Теги:
internet-explorer-8
addclass

1 ответ

1
Лучший ответ

Это было исправлено, выполнив следующие функции: theObject.children('li:nth-child(2n+1)').addClass('triggerMargin');

где theObject равен $(this) для объекта, который предназначен для добавления к нему класса.

  • 0
    Спасибо за размещение вашего исправления. И да, jquery обрабатывает поддержку :nth-child ;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню