how do i reference newly created elements in jquery?

Question

I devised a page that sends an AJAX request to retrieve a table of x rows and x columns into a DIV tag on an HTML page (ASPX page actually), but now, I have no way to access the newly created table elements via JQuery. The jQuery website mentions that you can attach events to all the newly created elements in a container, but there is no working example on how to achieve this.

Here's the code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tiler.aspx.vb" Inherits="TestJquery.tiler" %>





    
    
    
    
    


    
             
            Tile Size:
            Grid Size:
             Dimensions:
    
    
        

        
        
            
                
                Stock: 50/50
            
            
                
                Stock: 25/25
            
            
                
                Stock: 5/5
            
            
                
                Stock: 50/50

The auto-generated table fits inside the "dropgrid" DIV.

Here's the script:

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




});

Basically, the user drags tiles from the right hand side into the grid(table) and the jQuery code works if the table is already there, but not if it's generated. The table looks like:

Basically, the code determines when a tile is hovering over a table cell, when the mouse is released, the image (IMG) inside the TD is changed to that image and the ALT tag contains the SKU (it's a work in progress). Ultimately, a pattern is created by the user and the table is AJAXed to another webservice that stitches the images together (resizes, saves to PDF, and a few other things).

Anyway, the syntax for accessing dynamically created elements confuses me.

how do i reference newly created elements in jquery?

Answers (1)

Related Questions