如何在jQuery中动态添加数据

how to add data dynamically in jQuery?

本文关键字：动态 添加 数据 jQuery      更新时间：2023-09-26

你能告诉我如何动态添加数据吗？我不能做和静态一样的东西。

http://jsfiddle.net/eHded/1537/

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

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

我得到了按钮点击事件，但这并不正常。

http://jsfiddle.net/eHded/1538/

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

试试这个：

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

Js出价

您没有关闭<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插件似乎也有问题。项目只会在您单击它们的第二次时展开
理想情况下，插件将使用事件委派来确保扩展仍然有效，即使您更改了树，也不必重新初始化。由于每次插入后都会重新初始化树，因此节点上会附加多个事件处理程序。因此，当你插入奇数个节点时，它会将元素切换偶数次（因为你在一开始就初始化了它，当时它是空的），不会给你任何结果。您可以通过在重新初始化之前删除切换上的所有事件处理程序来修复它：

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

我真的想找一个更好的插件。

相关文章：