Question

您能告诉我如何动态添加数据吗？我无法与静态相同。

请检查此小提琴并打开面板显示菜单以及子菜单选项。

现在我需要点击按钮进行相同操作。我有添加按钮。我想要添加菜单选项（在面板中是 Additem 的子菜单）我们可以这样做。

我收到按钮点击事件，但这样做不正常。

$('#add').click(function(){
// alert('e')   
 $('#tree li').append('<ul><li> <span>jjjj</span><ul>')
         var tree = $('#tree').goodtree({'setFocus': $('.focus')});

})

Answer 1

您未关闭<ul>和<li>标记此外，您可能不希望将新元素添加到树中的每个<li> 请尝试以下方法（http://jsfiddle.net/eHded/1541/）：

$(function() {
    var tree = $('#tree').goodtree({
        'setFocus': $('.focus')
    });

    $('.slider-arrow').click(function() {
        var anchor = this;
        var removeClass = "show";
        var addClass = "hide";
        var diff = "+=300";
        var arrows = "&laquo;";
        if ($(anchor).hasClass("hide")) {
            diff = "-=300";
            removeClass = "hide";
            addClass = "show";
            arrows = "&raquo;";
        }
        $(".slider-arrow, .panel").animate({
            left: diff
        }, 700, function() {
            // Animation complete.
            $(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
        });
    });

    $('#add').click(function() {
        $('#tree').children().last().append('<ul><li><span>jjjj</span></li></ul>');
        $('.goodtree_toggle').off();
        $('#tree').goodtree({
            'setFocus': $('.focus')
        });
    })
});

您使用的goodtree插件似乎也存在问题。这些项目仅在您每次点击它们时才会展开理想情况下，即使您更改树，插件也会使用event delegation来确保扩展仍然有效，而无需重新初始化。由于在每次插入后重新初始化树，因此会有多个事件处理程序附加到节点。因此，当你插入奇数个节点时，它会将元素切换一次偶数（因为你在它开始时它是空的时候初始化它），没有给你任何结果。您可以在重新初始化之前删除切换上的所有事件处理程序来修复它：

$('.goodtree_toggle').off();

我真的会寻找一个更好的插件。

Answer 2

请改为尝试：

$('#add').click(function(){

    var data = $('#tree li').html();
 $('#tree li').html(data+'<ul><li> <span>jjjj</span><ul>')
         var tree = $('#tree').goodtree({'setFocus': $('.focus')});

});

JsFiddle

如何在jQuery中动态添加数据？

2 个答案: