Question

I’m pulling my hair out trying to resolve this so any tips and help would be great.

I’m trying to build a visual logic tree where the user will be able to input each node of the actual logic tree (this is a screen shot of what it actually looks like). The default logic tree has a user input for hypothesis, then 4 user inputs for “buckets” which branch out from the hypothesis and then each bucket has 3 default “sub-buckets.”

Aside from entering input to each node, a user can do two things:
1) a user can create additional “buckets” (above and beyond the 4 default ones)
2) a user can create additional “sub-buckets” for each bucket

The code I have successfully 1) allows a user to create new “buckets” 2) allows a user to create new “sub-buckets” for any of the 4 default buckets that exist.

However, my problem is that this code breaks when a user attempts to add a new “sub-bucket” to a “bucket” they just created. I can’t figure out why this is happening.

Here is the JS for adding a bucket and adding a sub-bucket:

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

Here is the PHP script that is called by JS to create a new bucket:

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

Here is the drawBucketNew function in PHP that adds a “bucket” to the logic tree the user has on screen:

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

You should use jQuery’s live() method for the click event like so:

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

This will delegate the click event handler on new elements as they are added to the DOM as stated below:

The live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants. The handler passed to .live() is never bound to an element; instead, live() binds a special handler to the root of the DOM tree…