使用 jQuery .append() 将元素添加到刚刚使用 jQuery 创建的新元素答案

【问题标题】：Using jQuery .append() to add elements to a new element which was just created with jQuery使用 jQuery .append() 将元素添加到刚刚使用 jQuery 创建的新元素
【发布时间】：2011-09-05 16:43:27
【问题描述】：

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

我正在尝试构建一个可视化逻辑树，用户将能够在其中输入实际逻辑树的每个节点（这是 screen shot 的实际外观）。默认逻辑树有一个用于假设的用户输入，然后是 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;
    });

下面是JS调用创建新桶的PHP脚本：

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

这是 PHP 中的 drawBucketNew 函数，它向用户在屏幕上的逻辑树添加一个“桶”：

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

【问题讨论】：

标签： php jquery append

【解决方案1】：

你应该像这样使用 jQuery 的 live() 方法来处理点击事件：

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

这将在 new 元素上委托 click 事件处理程序，因为它们被添加到 DOM，如下所述：

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

【讨论】：

哇。就这么简单...感谢指针。非常感谢！
没问题。我经常使用live() 函数。如果您认为这是正确的答案，请随时投票/检查。此外，不错的应用程序。看起来真的很酷。

【解决方案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;
    });

【讨论】：