javascript - 如何在创建元素后立即选择它？

Question

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

代码如下:

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

在您的情况下，objectID 只是 id 本身，选择器也需要 #。所以改变

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

到

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

此外，这是无效语法:

$(objectID > "span")

更正为

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

您可能想看看 string concatenation in js

实际上，您可以在创建时直接将 jQuery 元素本身保存在一个变量中:

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

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