尽管使用on（），但在将元素添加到DOM之后，jQuery点击事件不会触发
[英]Jquery click events not triggering after adding an element to the DOM, despite using on()
问题描述
I think I must be missing something obvious here. 
我想我一定在这里缺少明显的东西。
I have a function bound to the click event on a class. 我有一个绑定到类上的click事件的函数。 The function adds an element to the DOM in a location that depends on the position of the clicked element. 该函数将元素添加到DOM中，该位置取决于所单击元素的位置。 Basically, if you click a box in several rows of boxes, then an information display div is added under the row of the clicked box (see example code). 基本上，如果单击几行框中的一个框，则会在所单击的框的行下添加一个信息显示div（请参见示例代码）。
However, the way I've implemented this it seems that once the information display div has been added, the click event no longer triggers on any of the elements appearing in the DOM before the added div. 但是，我实现此方法的方式似乎是，一旦添加了信息显示div，在添加div之前，click事件就不再触发DOM中出现的任何元素。 It will still trigger on elements after the added div. 在添加div之后，它仍然会在元素上触发。
I've delegated the event handler via on(), so I'm not sure why it's not staying bound. 我已经通过on（）委托了事件处理程序，所以我不确定为什么它没有保持约束。 What dunderheaded obvious thing am I missing please? 我想念什么明显的东西？
Thanks in advance for your valuable time. 在此先感谢您的宝贵时间。
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>Box page</title>
<link rel="stylesheet" type="text/css" media="" href="http://www.hud.ac.uk/media/universityofhuddersfield/styleassets/css/bootstrap.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script><!-- jquery.1.9.2.js -->
<style>
.cbox {
}
.cbox h2 {
margin: 5px;
color: #fff;
}
.green .squarepushed {
background-color: #8CC63F;
}
.pink .squarepushed {
background-color: #EC008C;
}
.blue .squarepushed {
background-color: #00ADEF;
}
.orange .squarepushed {
background-color: #F89828;
}
.squarepusher {
margin-top: 100%;
}
.squarepushed {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border-radius: 5px;
color: #fff;
}
</style>
<script>
$(document).ready( function() {
$('#cboxes').on('click', '.cbox', function() {
console.log('Triggered!');
$('#cdisplay').remove();
var numcols = 6;
var currpos = $(this).index()+1;
var currrow = Math.ceil( currpos / numcols );
var endsquare = currrow * numcols ;
var html = "showing content for box "+currpos+" after box "+endsquare;
$(this).parent().children('.cbox:nth-child('+endsquare+')').after("<div class='col-xs-12' id='cdisplay'><p>"+html+"</p></div>");
} );
});
</script>
</head>
<body>
<div class="container">
<div class="row" id="cboxes">
<div class="cbox pink col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 1</h2>
</div>
</div>
<div class="cbox blue col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 2</h2>
</div>
</div>
<div class="cbox blue col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 3</h2>
</div>
</div>
<div class="cbox pink col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 4</h2>
</div>
</div>
<div class="cbox pink col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 5</h2>
</div>
</div>
<div class="cbox orange col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 6</h2>
</div>
</div>
<div class="cbox green col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 7</h2>
</div>
</div>
<div class="cbox orange col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 8</h2>
</div>
</div>
<div class="cbox orange col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 9</h2>
</div>
</div>
<div class="cbox orange col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 10</h2>
</div>
</div>
<div class="cbox orange col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 11</h2>
</div>
</div>
<div class="cbox green col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 12</h2>
</div>
</div>
<div class="cbox blue col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 13</h2>
</div>
</div>
<div class="cbox pink col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 14</h2>
</div>
</div>
<div class="cbox orange col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 15</h2>
</div>
</div>
<div class="cbox orange col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 16</h2>
</div>
</div>
<div class="cbox green col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 17</h2>
</div>
</div>
<div class="cbox blue col-xs-2">
<div class="squarepusher"></div>
<div class="squarepushed">
<h2>Box 18</h2>
</div>
</div>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
1 2014-07-03 10:26:41
The div you are adding stretches all the way from the top of the screen to it's position, covering all elements above it. 您要添加的div从屏幕顶部一直延伸到其位置，覆盖了屏幕上方的所有元素。
Add this css style: 添加以下CSS样式：
#cdisplay {
float: left;
}
解决方案2
1 2014-07-03 10:27:27
Fast answer, Add this to css: 快速回答，将此添加到CSS：
#cdisplay {
z-index: -1;
}
The problem is when you append #cdisplay, it overshadows the #cboxes so you can not click on them anymore. 问题是，当您附加#cdisplay时，它会使#cbox阴影化，因此您无法再单击它们。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.