Question

我正在使用自定义Basic HTML Template。它的投资组合与JQuery一起使用。我想动态添加portfolio images。所以，我做的是，我从DATA文件中获取XML，然后将其附加到HTML页面。它工作正常。但是，现在Portfolio无效。有什么建议吗？

此处附加代码

$(data).find('imageGroup').each(function () {
    var imageGroup = $(this);
    if (imageGroup.length) {
        var m = '<ul class="portfolio-items col-4">\n';
        imageGroup.find('image').each(function () {
            m += '<li class="portfolio-item ' + $(this).attr('group') + '">\n';
            m += '<div class="item-inner">\n';
            m += '<div class="portfolio-image">\n';
            m += '<img src="' + $(this).attr('thumb') + '" alt="">\n';
            m += '<div class="overlay">\n';
            m += '<a class="preview btn btn-danger" title="' + $(this).attr('info') + '" href="' + $(this).attr('full') + '"><i class="icon-eye-open"></i></a>\n';
            m += '</div>\n';
            m += '</div>\n';
            m += '<h5>' + $(this).attr('des') + '</h5>\n';
            m += '</div>\n';
            m += '</li><!--/.portfolio-item-->\n';
        });
        m += '</ul>\n';
    }
    $('.box').append(m);
});

这是设置投资组合项目的模板开发人员的代码。

jQuery(function($) {
//alert("developer.js");
    //PrettyPhoto
    $("a.preview").prettyPhoto({
        social_tools: false
    });

    //Isotope
    $(window).load(function(){
        $portfolio = $('.portfolio-items');
        $portfolio.isotope({
            itemSelector : 'li',
            layoutMode : 'fitRows'
        });
        $portfolio_selectors = $('.portfolio-filter >li>a');
        $portfolio_selectors.on('click', function(){
            $portfolio_selectors.removeClass('active');
            $(this).addClass('active');
            var selector = $(this).attr('data-filter');
            $portfolio.isotope({ filter: selector });
            return false;
        });
    });
});

另外，我可以为您提供我在这里想念的任何代码。它将帮助您解决问题。我无法理解我必须做什么。如果有人能指出我。很高兴。

感谢StackOverflowers

当我在developer.js组合中使用alert时工作正常。如果没有，它就不起作用了。如何解决这个问题。

Answer 1

您需要使用事件委派将事件附加到动态添加的元素。：

    $('.box').on('click','.portfolio-filter >li>a', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });

在添加数据后，您还需要附加同位素插件。

附加数据后，投资组合无法正常工作

1 个答案: