插件内部的div 无法APPEND 元素

学习编写JQ插件碰到一个问题
主页代码<head>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/Plug-in/myfreetable/myfreetable.js"></script>
<style rel="stylesheet">
</style>
<script type="text/javascript" >
$(document).ready(function() { var cmd1=document.createElement('div');
var cmd2=document.createElement('input');
cmd2.type="button";
cmd2.value="aaa";
$(cmd1).append(cmd2);
 $("#tt").append(cmd1); $("#flex1").myfreetable({
height:250,
width: 170
});
});
</script>
</head>
<body>
<div id="flex1"  ></div>
<div id="tt"></div>
</body>myfreetable.js代码
(function($){ $.fn.myfreetable = function(p) {
         return this.each(function(){
        var t=this;
$.addfreetable(this,p);
         });
};
$.addfreetable = function (t,p){
if (t.grid) return false; //如果表格存在就返回
p = $.extend({ //设定默认值
height: 200, //高度
width: 150 //宽度
},p); $(t).show() // 如果隐藏就显示
var tDiv2 = document.createElement('div');
tDiv2.className = 'tDiv2';
for (var i = 0; i < 4; i++) {
var btn = "buttons"+i;
var btnDiv = document.createElement('div');
btnDiv.className = 'fbutton';
btnDiv.innerHTML = ("<div><span>buttons") + i + ("</span></div>");
$(tDiv2).append(btnDiv);
$(t).append(btnDiv);
}
$(t).append(tDiv2);
};
}(jQuery));
运行结果
 
在前端的DIV Appende 的按钮正常, 而有插件动作插入的DIV里边元素 无效 div tDiv2里面没有任何元素
$(tDiv2).append(btnDiv); 这一句无效应该如何解决??appendJavaScript

解决方案 »

  1.   


    我刚试了下跟jquery 版本有关系，如果你是用的低版本的
       $(tDiv2).append(btnDiv.innerHTML);或者 $(tDiv2).append($(btnDiv).html());
      我刚用1.7版本的  $(tDiv2).append(btnDiv); 这样是可以的。 估计高版本的解决了这个问题，楼主你可以试试
      

  2.   

    /*! jQuery v1.7.2 jquery.com | jquery.org/license */我用的版本是这个,而且 我这些代码 是根据 flexigrid.js "仿制"出来的 . flexigrid 是可以正常. 就是不知道这个为啥不行
      

  3.   

    不过我还是不明白其中的原因,  在插件里加入空的div 无效 在前端加入就可以
    var tDiv2 = document.createElement('div');
    tDiv2.className = 'tDiv2';
    for (var i = 0; i < p.buttons.length; i++) {
    var btn = p.buttons[i];
    if (!btn.separator) {
    var btnDiv = document.createElement('div');
    btnDiv.className = 'fbutton';
    btnDiv.innerHTML = ("<div><span>") + (btn.hidename ? "&nbsp;" : btn.name) + ("</span></div>");
    if (btn.bclass) $('span', btnDiv).addClass(btn.bclass).css({
    paddingLeft: 20
    });
    if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
    $('span',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
    $('span',btnDiv).css( 'paddingLeft', 20 ); if (btn.tooltip) // add title if exists (RS)
    $('span',btnDiv)[0].title = btn.tooltip; btnDiv.onpress = btn.onpress;
    btnDiv.name = btn.name;
    if (btn.id) {
    btnDiv.id = btn.id;
    }
    if (btn.onpress) {
    $(btnDiv).click(function () {
    this.onpress(this.id || this.name, g.gDiv);
    });
    }
    $(tDiv2).append(btnDiv);
    if (browser.msie && browser.version < 7.0) {
    $(btnDiv).hover(function () {
    $(this).addClass('fbOver');
    }, function () {
    $(this).removeClass('fbOver');
    });
    }
    } else {
    $(tDiv2).append("<div class='btnseparator'></div>");
    }
    }
    $(g.tDiv).append(tDiv2);
    $(g.tDiv).append("<div style='clear:both'></div>");
    $(g.gDiv).prepend(g.tDiv);
    }这是 flexigrid.js里面的代码, 是可以使用的, 照抄下来就不行了
      

  4.   

    呵呵，我刚忙去了，我也是不太懂，我主要是做后端的，js 方面也还很弱， append 我用的时候一般都是直接接的html标签，比如append("<h1>111</h1>"),很少用 append(element)的方式 也不太理解其原理，看有没有大神进来 讲解下。
      

  5.   

    一个控件只能在一个容器中，从t添加了btnDiv后，就会从tDiv2中移除。要clone一个新对象
    //$(t).append(btnDiv);
    //========>>
    $(t).append(btnDiv.cloneNode(true));///添加克隆的新对象，不能直接append存在的对象，要不会从原来的容器中移除
      

  6.   


    是这样,  我的真实意图, 是想把btnDiv 加入到tDiv2 中, 发现不成功, 再尝试加入T 看是否成功, 要是加入tDiv2成功了就不要加入T 了
    最终的目的是弄一个像 flexigrid的类 有一排功能按钮, 下面一个表格.. 还在学习中,请多指教
      

  7.   

    一般都会成功的$(tDiv2).append(btnDiv);
    $(t).append(btnDiv);所以tDiv2的添加的bntDiv全部添加到t中了
      

  8.   


    $(tDiv2).append(btnDiv);
    $(t).append(tDiv2);如果是这样的代码,  就不行了.  您试试 看是否是特例