Использование jQuery .append () для добавления элементов в новый элемент, который был только что создан с помощью jQuery.

Question

Я дергаю себя за волосы, пытаясь решить эту проблему, поэтому любые советы и помощь будут великолепны.

Я пытаюсь построить дерево визуальной логики, где пользователь сможет вводить каждый узел фактического дерева логики (это снимок экрана того, как оно на самом деле выглядит). Логическое дерево по умолчанию имеет пользовательский ввод для гипотезы, затем 4 пользовательских ввода для «сегментов», которые отходят от гипотезы, а затем в каждом сегменте есть 3 «суб-сегмента» по умолчанию.

Помимо ввода ввода для каждого узла, пользователь может делать две вещи: 1) пользователь может создавать дополнительные «корзины» (помимо 4-х по умолчанию) 2) пользователь может создавать дополнительные «вложенные сегменты» для каждого сегмента

Код, который я успешно 1) позволяет пользователю создавать новые "сегменты" 2) позволяет пользователю создавать новые "вложенные сегменты" для любого из 4 стандартных существующих сегментов.

Однако моя проблема заключается в том, что этот код ломается, когда пользователь пытается добавить новый «вложенный сегмент» в только что созданный «сегмент». Я не могу понять, почему это происходит.

Вот JS для добавления сегмента и суббакета:

    $('.add_sub_bucket').click(function (){
        // determine what sub-bucket link was clicked
        var currentId = $(this).attr('id');
        $('#bucket_rows' + currentId).append('<tr><td class="td_test"></td><td class="td_test"></td><td class="td_test"><input type="text" placeholder="sub-bucket" name="sb' + currentId + '[]" /><a href="#" class="remove_sub_bucket">' + currentId + '<img src="/images/xbutton.png" /></a></td></tr>');
    return false;
    });

    var count_bucket = 3; //default # of buckets is 4 (numbers 0 through 3)
    var loadPHP = "create_new_bucket.php";  
    $(".add_bucket").click(function(){
        count_bucket++;
        $("#tree_container2").append( $('<div id="bucket' + count_bucket + '">').load(loadPHP, {count_bucket: count_bucket}));
        return false;
    });

Вот скрипт PHP, который вызывается JS для создания нового сегмента:

<?php
    include_once "test_functions.php"; // include functions page
    $i = $_POST['count_bucket'];
    $_SESSION['buckets'] = $i;
    drawBucketNew($i);
?>

Вот функция drawBucketNew в PHP, которая добавляет «корзину» в логическое дерево, которое пользователь имеет на экране:

function drawBucketNew($i)
{
echo $i; //doublecheck the bucket count is correct
        echo '<div id="bucket_rows' . $i . '">';
            echo '<table class="basic">';
                echo '<tr>';
                    echo '<td class="td_alt">' . '</td>';
                    echo '<td class="td_alt">' . '</td>';
                    echo '<td class="td_alt"><input type="text" placeholder="sub-bucket" name="sb' . $i . '[]" /></td>';
                echo '</tr>';

                echo '<tr>';
                    echo '<td class="td_alt">' . '</td>';
                    echo '<td class="td_alt"><input type="text" placeholder="bucket" name="b[]" /><a href="#" id="remove_bucket">remo</a></td>';
                    echo '<td class="td_alt"><input type="text" placeholder="sub-bucket" name="sb' . $i . '[]" /></td>';
                echo '</tr>';

                echo '<tr>';
                    echo '<td class="td_alt">' . '</td>';
                    echo '<td class="td_alt">' . '</td>';
                    echo '<td class="td_alt"><input type="text" placeholder="sub-bucket" name="sb' . $i . '[]" /></td>';
                echo '</tr>';
            echo '</table>';

        echo '</div>'; // close bunch rows

                echo '<table class="basic">';
                    echo '<tr>';
                        echo '<td class="td_alt"></td>';
                        echo '<td class="td_alt"></td>';
                        echo '<td><a href="#" class="add_sub_bucket" id="' . $i . '">add sub-bucket</a></td>';
                    echo '</tr>';
                echo '</table>';
}

Answer 1

Вы должны использовать jQuery live() метод для события нажатия, например, так:

$('.add_sub_bucket').live("click",function (){ //...

Это делегирует обработчик события нажатия на новые элементы по мере их добавления в DOM, как указано ниже:

Метод live() может воздействовать на элементы, которые еще не были добавлены в DOMс помощью делегирования событий: обработчик, связанный с элементом-предком, отвечает за события, которые инициируются его потомками.Обработчик, переданный в .live (), никогда не привязывается к элементу;вместо этого live () связывает специальный обработчик с корнем дерева DOM ...

Answer 2

попробуйте вживую

$('.add_sub_bucket').live("click",function (){
        // determine what sub-bucket link was clicked
        var currentId = $(this).attr('id');
        $('#bucket_rows' + currentId).append('<tr><td class="td_test"></td><td class="td_test"></td><td class="td_test"><input type="text" placeholder="sub-bucket" name="sb' + currentId + '[]" /><a href="#" class="remove_sub_bucket">' + currentId + '<img src="/images/xbutton.png" /></a></td></tr>');
    return false;
    });