Question

I am using jQuery Masonry script. When loading the page first time everything is good, but when I add dynamic content, the script does not reload again.

Here is my code:

    <div id="alpha" class="container clearfix">

        <div class="item"><img src="<?php echo base_url();?>css/images/default.jpg"/><div id="coment"></div></div>
        <div class="item"><img src="<?php echo base_url();?>css/images/default.jpg"/></div>
        <div class="item"><img src="<?php echo base_url();?>css/images/default.jpg"/></div>
        <div class="item"><img src="<?php echo base_url();?>css/images/default.jpg"/></div>
        <div class="item"><img src="<?php echo base_url();?>css/images/default.jpg"/></div>
        <div class="item"><img src="<?php echo base_url();?>css/images/default.jpg"/></div>
        <div class="item"><img src="<?php echo base_url();?>css/images/default.jpg"/></div>

    </div>

    <script src="<?php echo base_url()?>js/jquery.min.js"></script>
    <script src="<?php echo base_url()?>js/jquery-1.7.1.min.js"></script>
    <script src="<?php echo base_url()?>js/jquery.masonry.min.js"></script>

 <script type="text/javascript">

    $(function(){
            var $alpha = $('#alpha');        

            $alpha.masonry({
              itemSelector: '.pin_item',
              columnWidth: 230,
                  //isAnimated: true
            });

        });

  </script>

You can seen the div id="coment" when comment it append comment. The first top item and bottom item look merged. There is no cape between each other.

Can any one help me?

Answer 1

That code doesn’t have a div with the ID "coment" unless I’m just blind. It also doesn’t show how you’re dynamically adding new content. Finally, does pastebin allow execution of code? A live working example would work better; otherwise you could have just pasted your code here instead.

In short: whatever you’re using to dynamically add content must surely have a callback function. Just fire masonry() again as part of the callback.