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 也响应鼠标点击？

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

DOM elements not responding to jquery

javascript

jquery

dom

jquery-masonry