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

Answer 2

您当前的代码没有为您提供值，因为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)
};

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

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

2 个答案: