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

您需要通过所谓的delegated event将事件绑定到父元素。

只需改变：

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

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

所示

DOM元素没有响应jquery

3 个答案: