$(document).ready( function() {
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 160
});
$('.grid-item').on( 'click', function() {
// create new item elements
var $items = $('<div class="grid-item"></div>');
// append items to grid
$grid.append( $items )
// add and lay out newly appended items
.masonry( 'appended', $items );
});
});
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #EEE;
max-width: 1200px;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 160px;
height: 120px;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid">
<div class="grid-item"></div>
</div>
In the above code demonstration, first div which is initially visible is set to onclick so that it will append 1 more same div to the page on mouse click. The div which is appended after 'onclick' is exactly similar to the initial one. But only the initially present div responds to mouse click.
Click on any other div than the first one you will understand the problem. So how can i make other divs also responsive to mouse click?