Как добавить данные динамически в JQuery? [Дубликат]

0

Не могли бы вы рассказать мне, как динамически добавлять данные? Я не могу сделать то же самое, что и статический.

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')});

})
  • 0
    это неправильно, пожалуйста, проверьте, пожалуйста, 2 раза кнопку добавления
  • 0
    это должно быть так, если пользователь нажимает один раз кнопку добавления. Затем он выводит один jjj внутри кнопки добавления. если пользователь нажимает 2 раза, он отображается два раза или около того ... но там нет ничего, кроме jjj
Теги:
jquery-mobile

2 ответа

0

Вы не закрыли <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();

Я бы действительно искал лучший плагин.

  • 0
    Можете ли вы использовать скрипку
  • 0
    Я нашел еще несколько вопросов. Скоро будет обновлено, включая ссылку на jsfiddle
Показать ещё 7 комментариев
0

Попробуйте это вместо этого:

$('#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

  • 0
    Ваш ответ правильный, но я получил одну ошибку
  • 0
    можешь сказать какая ошибка?
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню