创建元素后如何选择元素？

Question

I have a function which shoold create an element and save it's measurements into an array. But it doesn't work because my just created element .width() returns NULL . And another part of my function, which shoold check if DOM exists, doesn't work either because of the same problem: it seems like the JavaScript engine just cannot find a DOM, I just created, by it's ID. Where is the error and how can I select an element right after its creation?

Here is the code:

var objCounter = 1;

function objectCreate(type) {
// get ID, check if DOM exists

objectID = 'object-' + objCounter;

if ($(objectID).length) {
    objCounter += 1;
}

// get object type and create

var types = {
    'label' : function () {
        $("<div id=" + objectID + "><span>Hello world</span></div>").addClass('obj obj-label').appendTo('#page').draggable({
            revert : function(valid) {
                if(!valid) {
                    this.remove();
                }
            }
        });
        params = {
            w : $(objectID).width($(objectID > "span").width() * 1.25),
            h : $(objectID).height($(objectID > "span").width() * 1.25)
        };
        console.log($(objectID).width()); // --> NULL
    },
    /*...*/
};

return types[type]();

$(document).ready(function(){

$('#label').mousedown(function(){
    objectCreate('label');
  });
});

Answer 1

In your case, objectID is just the id itself, the selector requires # aswell. So change

console.log($(objectID).width()); // --> NULL

to

console.log($('#' + objectID).width()); // --> MAGIC

Futhermore, this is invalid syntax:

$(objectID > "span")

Correct that to

$('#' + objectID + " > span")

You might want to take a look at string concatenation in js

Actually, you can save the jQuery element itself in a variable directly when creating it:

var myobject = $("<div id=" + objectID + "><span>Hello world</span></div>");

myobject.addClass('obj obj-label').appendTo('#page').draggable()...
...
myobject.width();

Answer 2

Your current code doesn't give you the value because the objectID variable doesn't contain the preceding # for the id selector to work:

params = {
    w: $('#' + objectID).width($('#' + objectID + " > span").width() * 1.25),
    h: $('#' + objectID).height($('#' + objectID + " > span").width() * 1.25)
};

That being said, you should save the jQuery object containing the new element to a variable to save querying the DOM again:

var $object = $("<div id=" + objectID + "><span>Hello world</span></div>").addClass('obj obj-label').appendTo('#page').draggable({
    revert : function(valid) {
        if(!valid) {
            this.remove();
        }
    }
});
params = {
    w: $object.width($object.find("> span").width() * 1.25),
    h: $object.height($object.find("> span").width() * 1.25)
};

Also note the > selector needs correct concatenation.