Question

I’m attempting to create a “click to add” link that a user can click as many times as necessary. Each time they click it, 3 additional input fields will pop up. To do this, I’ve got jQuery which loads a PHP file that creates the 3 additional inputs and then loads them to an existing div container.

My problem is that after the user has clicked “click to add” link once and seen the 3 new input fields, if they click “click to add” a second time, the initial 3 fields are wiped out by the new 3 fields being added. How can I remedy this so that each time the user clicks 3 fields are added and the prior ones are preserved as well.

(NOTE: I’ve looked into using append() in conjunction with the jQuery I have below but I must be getting the syntax incorrect if that is indeed the best solution).

My jQuery is here:

    var loadPHP = "create_new_bucket.php";  
    $(".add_bucket").click(function(){  
        $("#tree_container2").load(loadPHP);
        return false;
    });  

Answer 1

jQuery.load() always replaces the content in the container. One way to get around this is to append a new element to the object, and populate that element with the new HTML.

Example:

$('#tree_container2').append( $('<div />').load(loadPHP) );