我是编程新手，特别是JS和JQuery。
我已经搜索了几个小时，试图弄清楚如何完成这个看似简单的任务并观察到来自才华横溢的程序员的大量代码，但没有什么能满足我的要求。
我只是想 （A）在用户单击鼠标的页面上创建动态DIV。这部分我可以完成。
（B）下一步是点击新的DIV并将其从页面中删除。
以下是我发现完成步骤A的步骤：
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
});
$(document.body).append(div);
这只是在文档正文中创建一个小的40x40px DIV。
步骤B证明了我的知识。只需点击新创建的DIV并将其从文档中删除即可？
如果我在页面加载之前手动创建相同的div，我可以按预期单击它。我找不到找到新发现的DIV的方法。请帮忙。我已经进行了广泛的研究，似乎无法找到如何实现这一目标。
答案 0 :(得分：0)
<强> jsbin demo
使用.on()方法
$("body").on("click", ".face", function(){
$(this).fadeOut(function(){
$(this).remove();
});
});
http://api.jquery.com/on/#direct-and-delegated-events
P.S：防止在整个文档中调度事件或"body"使用第一个静态父ID作为选择器$("#someid").on。
或圣地亚哥建议（但稍有不同），访问"click"元素属性而根本不使用div变量：
$('#picture').click(function(e) {
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
$('<div />', { // Don't forget closign slash!
'click': function(){ // The click property
$(this).fadeOut(function(){
$(this).remove();
});
},
'class':'face',
'css': {
position: 'fixed',
left: x,
top: y,
width: 40,
height: 40
}
}).appendTo("body");
});
<强> jsbin demo
答案 1 :(得分：0)
使用事件委托：
$(document).on('click', '.face', function(){
$(this).remove();
});
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div/>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
}
});
$(document.body).append(div);
});
});
$(document).on('click','.face', function() {
$(this).remove();
});#picture {
width: 200px;
height: 200px;
border: 1px solid black;
}
.face {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picture"></div>
答案 2 :(得分：0)
怎么样：
$(function(){
$('#picture').click(function(e) {
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
'click': function(ev) {
$(ev.target).remove();
}
});
$("body").append(div);
});
});#picture {
height: 150px;
width: 150px;
background:gray;
display:block;
}
.face {
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picture"></div>
答案 3 :(得分：0)
div.click(function(){
div.remove();
});
我在下面做了一个实例，如果你想测试它：）
$(function(){
$('#picture').click(function(e){
var x = e.pageX - 20 + 'px';
var y = e.pageY - 20 + 'px';
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'left': x,
'top': y,
'width': '40px',
'height': '40px'
},
});
/* HELLO DEAR, I DO THE TRICK */
div.click(function(){
div.remove();
});
$(document.body).append(div);
});
}); #picture{
width:500px;
height:500px;
background-color:green;
}
.face {
background-color:red
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="picture">
</div>
答案 4 :(得分：0)
我首先创建jQuery对象，然后你可以随意追加并删除它，而无需创建新的jQuery对象。
在图片点击监听器中，下面的所有脚本都会改变方块的位置，如果它没有被附加，则附加它，而点击方块本身就会将其删除。
$(function(){
var body = $('body');
var div = $('<div>', {
'class':'face',
'css': {
'position':'fixed',
'width': '40px',
'height': '40px',
'background': '#f9fd42',
}
});
$(document).on('click', function(e){
if(div.is(e.target)) div.remove();
});
$('#demo').click(function(e){
div.css({
'left': e.pageX - 20 + 'px',
'top': e.pageY - 20 + 'px'
}).appendTo(body);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//lorempixel.com/200/100" id="demo">
答案 5 :(得分：0)
int population_left(int x, int y, matrix& grid)
{
int popu;
for(int yi = y-1; yi <= y+1; y++)
{
for(int xi = x; xi<= x+1; x++)
{
if(xi == x && yi == y)
{
continue;
}
if (grid[yi][xi] == true)
{
popu++;
}
}
}
return popu;
}
JS
<div class="full-page">
<div class="imgbox">
</div>
</div>