如何在jquery中引用新创建的元素？_Jquery_Html_Asp.net_Ajax

如何在jquery中引用新创建的元素？

jquery html asp.net ajax

如何在jquery中引用新创建的元素？,jquery,html,asp.net,ajax,Jquery,Html,Asp.net,Ajax,我设计了一个页面，它发送一个AJAX请求，将包含x行和x列的表检索到HTML页面上的DIV标记中（实际上是ASPX页面），但是现在，我无法通过JQuery访问新创建的表元素。jQuery网站提到可以将事件附加到容器中所有新创建的元素，但是没有关于如何实现这一点的工作示例代码如下： <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tiler.aspx.vb" Inherits="TestJquery.tiler" %&g

我设计了一个页面，它发送一个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" />&nbsp;
            Tile Size:<select id="cboTileSize">
                <option value="19.6850393701">19.7&quot; (50cm)</option>
                <option  value="24" selected="selected">24&quot; (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:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<span class="avail">50</span>/<span class="stock">50</span></div>
            </div>

        </div>
    </div>


</body>
</html>


瓷砖尺寸：
19.7英寸（50厘米）
24英寸（61厘米）
网格大小：
2 X 2瓷砖
3 X 4瓷砖
4 X 4瓷砖
4 X 5瓷砖
尺寸：
股票：50/50
股票：25/25
库存：5/5
股票：50/50

自动生成的表格适合“dropgrid”分区

以下是脚本：

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);
        });
    });




});

var currentImage=null；
$（文档）.ready（函数（）{
$（'.idrg'）。可拖动({
遏制：“#dd”，
光标：“指针”，
不透明度：0.8，
开始：函数（）{
},
停止：函数（）{
}
});
$（'td'）。可拖放({
hoverClass:'tdHov'，
遏制：“#dd”，
drop：函数（事件、用户界面）{
var draggedDiv=ui.draggable；//保存img的div容器
var draggedDivPic=draggedDiv.find（'img'）；//div内的img
var dropToPic=$（this）.find（'img'）；//对TD内img标记的引用
var avail=draggedDiv.find（'.idscr.avail'）；
var available=parseInt（avail.text（））；
如果可用（大于0）{
//首先，从TD获取当前的imageID（如果有的话）（这样我们可以减少该图像的计数）
if（dropToPic.attr（'src'）='Images/bgc.png'）{
dropToPic.attr（'src'，draggedDivPic.attr（'src'））.attr（'alt'，draggedDivPic.attr（'id'）；//分配src&alt（产品SKU）
}
否则{
//有一个现有的图片，所以找到它的ID和当前的'avail'跨度标签值和减量。
//首先在当前图像的ALT中查找ID
var currentImgID='#'+dropToPic.attr（'alt'）；
//找到父div并设置为变量
var DivParentOfImg=$（currentImgID）.parent（）；//为什么这是未定义的
//获取可用范围的值
var avail2=DivParentOfImg.find（'.idscr.avail'）；
var available2=parseInt（avail2.text（））；
可用2+=1；
avail2.text（available2）；//设置新值
//把新照片放进去
dropToPic.attr（'src'，draggedDivPic.attr（'src'））.attr（'alt'，draggedDivPic.attr（'id'）；//分配src&alt（产品SKU）
};
};
//此图片上的减量计数
可用-=1；
如果（可用<0）{available=0}；
avail.text（可用）；//设置新计数
}
})
.dblclick（函数（）{
var dropToPic=$（this）.find（'img'）；//对TD内img标记的引用
if（dropToPic.attr（'src'）='Images/bgc.png'）{
//没有图像被丢弃在这里，所以没有增加的计数
//清除td平铺图像-实际上，替换为空白图像
dropToPic.attr（'src'，'Images/bgc.png'）.attr（'alt'，''）；
}否则{
//首先在当前图像的ALT中查找ID
var currentImgID='#'+dropToPic.attr（'alt'）；
//找到父div并设置为变量
var DivParentOfImg=$（currentImgID）.parent（）；//为什么这是未定义的
//获取可用范围的值
var avail2=DivParentOfImg.find（'.idscr.avail'）；
var available2=parseInt（avail2.text（））；
可用2+=1；
avail2.text（available2）；
//清除td平铺图像-实际上，替换为空白图像
dropToPic.attr（'src'，'Images/bgc.png'）.attr（'alt'，''）；
};
})
。单击（函数（）{
//保留额外的图像处理
});
$（'#btnsupmit'）。单击（函数（）{
var dimselection=$（“#cboGridSize选项：已选定”）.val（）；
var postData={“方法”：“GetTable”，“strDims”：dimselection}；
//厌倦了在WCF上乱搞而一事无成——现在使用简单的aspx页面而不是webservice
$.post（“/services.aspx”），postData，函数（数据）{
$（“#dropgrid”）.html（数据）；
});
});
});

基本上，用户从右侧将分片拖动到网格（表）中，如果表已经存在，jQuery代码就会工作，但如果它已经生成，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（这是一个正在进行的工作）。最终，用户创建一个模式，并将该表连接到另一个将图像缝合在一起的Web服务（调整大小、保存为PDF等）

无论如何，访问动态创建的元素的语法让我感到困惑。

上的

.on（）

语法可能会让人困惑，但请检查一下。我稍后会作出解释

$(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: '........'
        });
    });
});

创建后，我将如何引用以下内容$（'td'）。我会有多个“.on”s？哟