我设计了一个页面，它发送一个AJAX请求来检索x行和x列的表到HTML页面上的DIV标记（实际上是ASPX页面），但现在，我无法访问新创建的表元素通过JQuery。 jQuery网站提到你可以将事件附加到容器中所有新创建的元素，但是没有关于如何实现这一点的工作示例。
以下是代码：
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tiler.aspx.vb" Inherits="TestJquery.tiler" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="tiler.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/Jquery-1.10.2/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/JqueryUI/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="Scripts/tiler.js"></script>
</head>
<body>
<div id="options">
<input type="button" id="btnSubmit" value="Update Grid" />
Tile Size:<select id="cboTileSize">
<option value="19.6850393701">19.7" (50cm)</option>
<option value="24" selected="selected">24" (61cm)</option>
</select>
Grid Size:<select id="cboGridSize" >
<option value="2,2">2 X 2 tiles</option>
<option value="3,4" selected="selected">3 X 4 tiles</option>
<option value="4,4">4 X 4 tiles</option>
<option value="4,5">4 X 5 tiles</option>
</select>
Dimensions:<span id="dims"></span>
</div>
<div id="dd">
<div id="dropgrid">
<!-- table will be inserted here -->
</div>
<div id="dragfrom">
<div class="idrg">
<img src="images/TC-Colorblox-Berry.jpg" id="TC-Colorblox-Berry" alt="50" />
<div class='idscr'>Stock: <span class="avail">50</span>/<span class="stock">50</span></div>
</div>
<div class="idrg">
<img src="images/TC-Coordination2-Concur.jpg" id="TC-Coordination2-Concur" alt="25" />
<div class='idscr'>Stock: <span class="avail">25</span>/<span class="stock">25</span></div>
</div>
<div class="idrg">
<img src="images/TC-Ground-DarkGrey.jpg" id="TC-Ground-DarkGrey" alt="5" />
<div class='idscr'>Stock: <span class="avail">5</span>/<span class="stock">5</span></div>
</div>
<div class="idrg">
<img src="images/TC-Plexus-Lavender.jpg" id="TC-Plexus-Lavender" alt="50" />
<div class='idscr'>Stock: <span class="avail">50</span>/<span class="stock">50</span></div>
</div>
</div>
</div>
</body>
</html>
自动生成的表适合“dropgrid”DIV。
这是脚本：
var currentImage = null;
$(document).ready(function () {
$('.idrg').draggable({
containment: '#dd',
cursor: 'pointer',
opacity: 0.8,
start: function () {
},
stop: function () {
}
});
$('td').droppable({
hoverClass: 'tdHov',
containment: '#dd',
drop: function (event, ui) {
var draggedDiv = ui.draggable; //div container holding img
var draggedDivPic = draggedDiv.find('img'); //img inside div
var dropToPic = $(this).find('img'); //reference to IMG tag inside TD
var avail = draggedDiv.find('.idscr .avail');
var available = parseInt(avail.text());
if (available > 0) {
// first, get the current imageID from the TD, if any (so we can decrement that image's count)
if (dropToPic.attr('src') == 'Images/bgc.png') {
dropToPic.attr('src', draggedDivPic.attr('src')).attr('alt', draggedDivPic.attr('id')); //assign SRC & ALT(product SKU)
}
else {
// there's an existing pic, so find it's ID and current 'avail' span tag value and decrement.
//find the ID in the ALT of the current image first
var currentImgID = '#' + dropToPic.attr('alt');
// find the parent div and set to a variable
var DivParentOfImg = $(currentImgID).parent(); //why is this undefined
//get the value of the available span
var avail2 = DivParentOfImg.find('.idscr .avail');
var available2 = parseInt(avail2.text());
available2 += 1;
avail2.text(available2); //set the new value
//put the new pic in
dropToPic.attr('src', draggedDivPic.attr('src')).attr('alt', draggedDivPic.attr('id')); //assign SRC & ALT(product SKU)
};
};
//decrement count on this pic
available -= 1;
if (available < 0) { available = 0 };
avail.text(available); //set the new count
}
})
.dblclick(function () {
var dropToPic = $(this).find('img'); //reference to IMG tag inside TD
if (dropToPic.attr('src') == 'Images/bgc.png') {
//no image was ever dropped here, so no count to increment
//clears td tile image - actually, replaces w/ blank image
dropToPic.attr('src', 'Images/bgc.png').attr('alt', '');
} else {
//find the ID in the ALT of the current image first
var currentImgID = '#' + dropToPic.attr('alt');
// find the parent div and set to a variable
var DivParentOfImg = $(currentImgID).parent(); //why is this undefined
//get the value of the available span
var avail2 = DivParentOfImg.find('.idscr .avail');
var available2 = parseInt(avail2.text());
available2 += 1;
avail2.text(available2);
//clears td tile image - actually, replaces w/ blank image
dropToPic.attr('src', 'Images/bgc.png').attr('alt', '');
};
})
.click(function () {
//reserve for extra image manipulation
});
$('#btnSubmit').click(function () {
var dimselection = $("#cboGridSize option:selected").val();
var postData = { "method": "GetTable", "strDims": dimselection };
//got sick of screwing around with WCF and getting nowhere - using simple aspx page instead of webservice for now
$.post("/services.aspx", postData, function (data) {
$("#dropgrid").html(data);
});
});
});
基本上，用户将磁贴从右侧拖动到网格（表格）中，如果表格已经存在，则jQuery代码可以正常工作，但如果生成了表格则不行。 该表看起来像：
<table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td></tr><tr><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td></tr><tr><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td></tr><tr><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td><td><img alt="" src="Images/bgc.png"></td></tr></tbody></table>
基本上，代码确定图块何时悬停在表格单元格上，当鼠标释放时，TD内的图像（IMG）会更改为该图像，而ALT标记包含SKU（这是一项正在进行的工作）。最终，用户创建一个模式，并将表格AJAX到另一个将图像拼接在一起的Web服务（调整大小，保存为PDF，以及其他一些东西）。
无论如何，访问动态创建元素的语法让我感到困惑。
答案 0 :(得分：1)
.on()语法可能令人困惑，但请查看此JSFiddle。我将很快跟进解释。
$(document).ready(function(){
// This code says "listen for a click to occur on a button anywhere withing the current document"
$('input[type="button"]').on('click', function(){
alert($(this).val());
});
// This code says "Listen for any button within #mydiv to get clicked"
// So anytime you are in the area of #mydiv it will listen for a click and check if it occurred on a button
$('#mydiv').on('click', 'input[type="button"]', function(){
alert($(this).val());
});
});
<强>更新
$.post("/services.aspx", postData, function (data) {
$("#dropgrid").html(data);
$("#dropgrid").find('td').droppable({
hoverClass: 'tdHov',
etc: '........'
});
// If the code above doesn't work then try this
$("#dropgrid").find('td').each(function(){
$(this).droppable({
hoverClass: 'tdHov',
etc: '........'
});
});
});