Question

我试图从对象中的函数动态创建div元素但是我收到错误

index.html:23 Uncaught TypeError: toolbardiv.css is not a function

我的代码中的问题无法解释我出了什么问题

$(document).ready(function(){
                var toolbar = {
                        render:function(){
                            var toolbardiv = document.createElement("div");
                            toolbardiv.css({'class':'draggable box'});
                            toolbardiv.id = "toolbardiv";
                            toolbardiv.appendTo('#container');
                        },
                        init: function(){},
                        createButton: function(){

                        },
                        createText: function(){}
                    };
                    toolbar.render();


                $( ".draggable" ).draggable();
            });

Answer 1

你似乎在交织jQuery和Javascript，如果你使用的是基于jQuery的库可能会导致问题（因为库可能需要jQuery对象而不是传统的DOM元素）。

您可以大量简化一些代码，尤其是使用基于jQuery的语法创建<div>：

// This will create your element with its attributes and add it to your container
$("<div id='toolbardiv' class='draggable box' />").appendTo('#container');

添加到现有函数的内容如下所示：

$(function(){
      // Define your toolbar
      var toolbar = {
           // Render your element
           render:function(){
                $("<div id='toolbardiv' class='draggable box' />").appendTo('#container');
           },
           init: function(){},
           createButton: function(){},
           createText: function(){}
      };
      // Call your render method
      toolbar.render();
      // Wire up your elements as "draggable"
      $(".draggable").draggable();
});

Answer 2

您的语法混合了jQuery和DOM。试试这个：

$(toolbardiv).css({'class':'draggable box'});

Jquery element.css方法不是函数

2 个答案: