插件不与div交互

Question

I use a plugin called grid rotator it works with div objects that are already have been declared in the html page. But the issue is if I append a div with jquery into my html and when I initialize the plugin again to the div. The plugin stopts working for the div. How can I fix this problem so that the plugin works even after I append divs with jquery later when the page is loaded? Anyone?

    <script type="text/javascript">
      $(function() {

        var BASE_PATH = 'js/brands/';
        var array_brands = <?php echo json_encode($array_brands); ?>;
        var directory = null;
        $.each(array_brands, function(key, value) {
            arr = array_brands[key];
            if($('.' + arr['directories'])) {
                $.each($(this), function (key, value) {
                    var res = $(this)[key]['filenames'].split(',');
                    directory = $(this)[key]['directories'];
                    console.log($(this)[key]['filenames']);
                    $.each(res, function(key, value) {
                        $('<li><a href="#"><img src="' + BASE_PATH + directory + '/' + res[key] + '"/></a></li>').clone().appendTo($('#' + 'ri-grid-' + directory + ' ul');
                     });
                });
            }
$.each($('#' + 'ri-grid-' + directory + ' ul li'), function() {
    console.log($(this));
});
console.log($('#ri-grid-' + directory).gridrotator());
            $('#ri-grid-' + directory).gridrotator( {
                  rows    : 3,
                  columns   : 15,
                  animType  : 'fadeInOut',
                  animSpeed : 1000,
                  interval  : 600,
                  step    : 1,
                  w320    : {
                    rows  : 3,
                    columns : 4
                  },
                  w240    : {
                    rows  : 3,
                    columns : 4
                  }
                } );



        });

Thanks in advance.

Answer 1

I assume you are using http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/ Correct me if I am wrong. The issue sounds to me like the div is being added to your document after grid rotator is initialized. If this is your plugin you want to put the initialization function after the div being added in jquery.