DOM elements not responding to jquery

Question

 $(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?

Answer 1

Use $(document).on( 'click', '.grid-item', function() {}); for binding the event for dynamically added items.

 $(document).ready(function () { var $grid = $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 160 }); $(document).on('click', '.grid-item', 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> 

Answer 2

You need to bind the event to the parent element through what's called a delegated event .

Just change:

$('.grid-item').on( 'click', function() {

to:

$grid.on( 'click', '.grid-item', function()

Note that for performance reasons, you should always bind delegated events to the most specific element possible.

For example, if you bind to body instead of .grid , it will still work. However, a click anywhere on the page wil trigger the event processing, even though it ultimately stops before triggering your function if the click target is not .grid-item .

---

 $(document).ready( function() { var $grid = $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 160 }); $grid.on( 'click', '.grid-item', 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> 

Answer 3

 $(document).ready( function() { var $grid = $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 160 }); $('body').on( 'click', '.grid-item', 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> 

You need to use Delegated events , as seen http://api.jquery.com/on/