Javascript 如何在元素创建后立即选择元素？

我有一个函数，它可以创建一个元素并将其测量值保存到一个数组中。但它不起作用，因为我刚刚创建的元素.width返回NULL。我函数的另一部分，shoold检查DOM是否存在，也不起作用，因为同样的问题：JavaScript引擎似乎无法找到一个DOM，我只是根据它的ID创建的。错误在哪里？我如何在创建一个元素后立即选择它

代码如下：

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

在您的例子中，objectID只是id本身，选择器也需要它。 所以改变

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

到

此外，这是无效的语法：

$(objectID > "span")

更正为

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

你可能想看看

实际上，您可以在创建jQuery元素时直接将其保存在变量中：

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

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

在您的例子中，objectID只是id本身，选择器也需要它。 所以改变

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

到

此外，这是无效的语法：

$(objectID > "span")

更正为

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

你可能想看看

实际上，您可以在创建jQuery元素时直接将其保存在变量中：

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

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

---

您当前的代码没有给您该值，因为objectID变量不包含id选择器工作所需的前一项：

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

也就是说，您应该将包含新元素的jQuery对象保存到一个变量中，以便再次保存对DOM的查询：

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

---

另请注意，>选择器需要正确的连接。

您当前的代码没有为您提供值，因为objectID变量不包含id选择器工作所需的前一项：

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

也就是说，您应该将包含新元素的jQuery对象保存到一个变量中，以便再次保存对DOM的查询：

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

还要注意>选择器需要正确的连接