Php 使用jQuery.append（）将元素添加到刚使用jQuery创建的新元素中

我正在努力解决这个问题，所以任何提示和帮助都会很好

我正在尝试构建一个可视化的逻辑树，用户将能够在其中输入实际逻辑树的每个节点（这是它实际外观的一个示例）。默认逻辑树有一个用户输入用于假设，然后有4个用户输入用于从假设分支出来的“bucket”，然后每个bucket有3个默认“sub bucket”

除了向每个节点输入输入外，用户还可以做两件事： 1） 用户可以创建额外的“bucket”（超过4个默认bucket） 2） 用户可以为每个bucket创建额外的“子bucket”

我已经成功完成的代码1）允许用户创建新的“bucket”2）允许用户为现有的4个默认bucket中的任何一个创建新的“sub bucket”

然而，我的问题是，当用户试图将新的“子bucket”添加到他们刚刚创建的“bucket”时，该代码就会中断。我不明白为什么会这样

下面是用于添加bucket和添加子bucket的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;
    });

$（'.add_sub_bucket'）。单击（函数（）{
//确定单击了哪个子存储桶链接
var currentId=$（this.attr（'id'）；
$（'#bucket_rows'+currentId）.append（''）；
返回false；
});
var count_bucket=3//桶的默认值为4（数字0到3）
var loadPHP=“create_new_bucket.php”；
$（“.add_bucket”）。单击（函数（）{
count_bucket++；
$（“#tree_container2”）.append（$（''）.load（loadPHP，{count_bucket:count_bucket}））；
返回false；
});

以下是JS调用的PHP脚本，用于创建新的bucket：

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

以下是PHP中的drawBucketNew函数，它向用户屏幕上的逻辑树添加了一个“bucket”：

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

函数drawBucketNew（$i）
{
echo$i；//双重检查桶计数是否正确
回声'；
回声'；
回声'；
回音“.”；
回音“.”；
回声'；
回声'；
回声'；
回音“.”；
回声'；
回声'；
回声'；
回声'；
回音“.”；
回音“.”；
回声'；
回声'；
回声'；
回显“”；//关闭束行
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
回声'；
}

对于单击事件，您应该使用jQuery的方法，如下所示：

$（'.add_sub_bucket'）.live（“单击”，函数（）{//…

这将委托新元素上的单击事件处理程序，因为它们被添加到DOM中，如下所述：

该方法能够通过使用事件委派影响尚未添加到DOM中的元素：绑定到祖先元素的处理程序负责在其子元素上触发的事件。传递给.live（）的处理程序从不绑定到元素，而是绑定到live（）将特殊处理程序绑定到DOM树的根…

您应该使用jQuery的方法处理单击事件，如下所示：

$（'.add_sub_bucket'）.live（“单击”，函数（）{//…

这将委托新元素上的单击事件处理程序，因为它们被添加到DOM中，如下所述：

该方法能够通过使用事件委派影响尚未添加到DOM中的元素：绑定到祖先元素的处理程序负责在其子元素上触发的事件。传递给.live（）的处理程序从不绑定到元素，而是绑定到live（）将特殊处理程序绑定到DOM树的根…

try live

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

$（'.add_sub_bucket'）.live（“单击”，函数（）{
//确定单击了哪个子存储桶链接
var currentId=$（this.attr（'id'）；
$（'#bucket_rows'+currentId）.append（''）；
返回false；
});

尝试直播

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

$（'.add_sub_bucket'）.live（“单击”，函数（）{
//确定单击了哪个子存储桶链接
var currentId=$（this.attr（'id'）；
$（'#bucket_rows'+currentId）.append（''）；
返回false；
});

Wow。就这么简单……感谢指针。非常感谢！！没问题。我经常使用

live（）

函数。请随意投票/检查您是否认为这是正确答案。还有，很好的应用程序。看起来真的很酷。哇。就这么简单……感谢指针。非常感谢！！没问题。我使用

live（）

功能相当强大。请随意投票/检查您是否认为这是正确答案。此外，应用程序不错。看起来非常酷。