DOM元素不響應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> 

在上面的代碼演示中，將最初可見的第一個div設置為onclick，以便在單擊鼠標時將另外1個相同的div附加到頁面上。 在“ onclick”之后附加的div與最初的div完全相似。 但是只有最初存在的div才能響應鼠標單擊。

單擊除第一個分區以外的任何其他div，您將了解該問題。 那么，如何使其他div也響應鼠標單擊呢？

Answer 1

使用$(document).on( 'click', '.grid-item', function() {}); 用於將事件綁定到動態添加的項目。

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

您需要通過所謂的委托事件將事件綁定到父元素。

只是改變：

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

至：

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

請注意，出於性能原因，應始終將委托事件綁定到可能的最特定元素。

例如，如果您綁定到body而不是.grid ，它將仍然有效。 但是，即使單擊目標不是.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> 

您需要使用Delegated事件 ，如http://api.jquery.com/on/