javascript - 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() {}); 为动态添加的项目绑定(bind)事件。

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