$(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也响应鼠标点击呢?
最佳答案
使用 $(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>
关于javascript - DOM 元素不响应 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32255948/