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

如何解决使用jQuery .append将元素添加到刚刚用jQuery创建的新元素中

|| 我正在竭尽全力以解决此问题，因此任何提示和帮助都将非常有用。 我正在尝试构建可视化逻辑树，用户可以在其中输入实际逻辑树的每个节点（这是其实际外观的屏幕截图）。默认逻辑树有一个用于假设的用户输入，然后有4个用于“桶”的用户输入，它们从假设中分支出来，然后每个存储桶都有3个默认的“子桶”。 除了向每个节点输入输入之外，用户还可以做两件事：  1）用户可以创建其他\“存储桶\”（超出4个默认存储桶）  2）用户可以为每个存储桶创建其他“子存储桶” 我成功编写的代码1）允许用户创建新的\“ buckets \” 2）允许用户为存在的4个默认存储桶中的任何一个创建新的\“ sub-buckets \”。 但是，我的问题是，当用户尝试向刚创建的\“ bucket \”添加新的\“ sub-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;
    });

这是JS调用以创建新存储桶的PHP脚本：

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

    

解决方法

        您应将jQuery的

live()

方法用于click事件，如下所示：

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

这会将click事件处理程序委托给新元素，如下所述：

live()

方法能够通过使用事件委托来影响尚未添加到DOM的元素：绑定到祖先元素的处理程序负责在其后代上触发的事件。传递给.live（）的处理函数永远不会绑定到元素。相反，live（）将特殊处理程序绑定到DOM树的根...     ,        尝试直播

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