jquery - 附加 jquery 对象为什么这不起作用

Question

我正在尝试以更加面向对象的方式编写我的 jquery，但我没有工作，你能帮忙吗？我得到的结果是对象对象

http://jsfiddle.net/Nrebv/

$(document).ready(function () {

        var divA = $('<div>', { class: 'divA' });
        var btn = $('<span>', { text: 'MYspanBTN' });

        btn.click(function(){

            alert('test');

        });


        var divResult = $('<div>', { html: divA + btn });





        $('#main').append(divResult);

});

Answer 1

替换这个：

var divResult = $('<div>', { html: divA + btn });

有了这个：

var divResult = $('<div>').append(divA, btn);

小提琴演示

Answer 2

那里有几个问题：

1. class是一个保留字，因此要将其用作对象初始化程序中的属性名称，您必须将其放在引号中（单引号或双引号，都可以）。事实上，这不是真的。在你用过的具体地方，其实还可以。不过，我不会推荐它。将其放在单引号或双引号中：var divA = $('<div>', { 'class': 'divA' });

2. 您html: divA + btn正在尝试组合两个对象实例。如果您的目标是组合它们的 HTML，那么html: divA.html() + btn.html(). 如果您的目标是制作divResult包含这两个元素的集合，则根本不要使用html，请执行以下操作：

   var divResult = divA.add(btn);
   

   ...它使用这两个集合的内容创建一个新的 jQuery 集合（在您的情况下，它们中的每一个都只包含一个元素，因此divResult最终将包含两个）。

Answer 3

可能是因为class它是javascript中的保留关键字

保留字 - MDN

关于连接，这是错误的，所以使用：

var divResult = $('<div>').append(divA, btn);

代替

    var divResult = $('<div>', { html: divA + btn });