Jquery append wont work with dynamic content?

Question

HI I am making a web application and have buttons that set a variable. I want the variable to be added to the div or element i have creating using a line split. I have tried but with now success I have tried changing the div from a 'P' to a D but it does not work. I have also tried a double click as to not interfere with the single click.

I have run out of ideas. I originally had this appending at caret but I don't want people to run code inside my textarea.

Here is the jsfiddle

JS

$(document).ready(function () {

    var toAdd = "</br>"
    $('input[id="freeSchoolMeals"]').click(function () {
        toAdd = '<div id="fsm">FSM</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="englishAdditional"]').click(function () {
        toAdd = '<div id="eal">EAL</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="giftedTalented"]').click(function () {
        toAdd = '<div id="gt">G&T</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="schoolAction"]').click(function () {
        toAdd = '<div id="sca">ScA</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="schoolActionPlus"]').click(function () {
        toAdd = '<div id="sap">SAP</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="statement"]').click(function () {
        toAdd = '<div id="stm">STM</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="speechLang"]').click(function () {
        toAdd = '<div id="slcn">SLCN</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="specificLearn"]').click(function () {
        toAdd = '<div id="spl">SpLD</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="mildLearn"]').click(function () {
        toAdd = '<div id="mld">MLD</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="behaviour"]').click(function () {
        toAdd = '<div id="besd">BESD</div>';
        alert(toAdd);
        return false;
    });
    $('input[id="autisticSpectrum"]').click(function () {
        toAdd = '<div id="asd">ASD</div>';
        alert(toAdd);
        return false;
    });


    $("p").dblclick(function () {
        var newContent = toAdd;
        $(this).append(newContent);
    });

    $("textarea").keyup(splitLine);

    function splitLine() {
        //$("#opt").empty();
        var lines = $("textarea").val().split(/\n/g);
        for (var i = 0; i < lines.length; i++) {
            var ele;
            if ($("p:eq(" + i + ")").get(0)) {
                ele = $("p:eq(" + i + ")");
                ele.html(lines[i]);
            } else {
                ele = $("<p>");
                ele.html(lines[i]);
                $("#opt").append($(ele).draggable());
            }
        }
    }
    $("#toggleButton").toggle(function () {
        $('#comments').animate({
            height: 650
        }, 200);
    }, function () {
        $('#comments').animate({
            height: 22
        }, 200);
    });

    $(document).keyup(function (e) {
        if (e.keyCode == 13) { // enter
            Search();
            return false; //you can also say e.preventDefault();
        }
    });
});

Answer 1

The binding $("p").dblclick() just bind to all existing p element when this line is executed. Therefore, all newly created p elements from your spitline function will not be binded with any event. You need to bind the dblclick event for each p element when you creat it.

Your code can be modified like this:

function pDblclick()
{
    var newContent = toAdd;
    $(this).append(newContent);
}

/* remove the old binding to all p element $('p').dblclik(...) */


/* This function is modified */
function splitLine() {
    //$("#opt").empty();
    var lines = $("textarea").val().split(/\n/g);
    for (var i = 0; i < lines.length; i++) {
        var ele;
        if ($("p:eq(" + i + ")").get(0)) {
            ele = $("p:eq(" + i + ")");
            ele.html(lines[i]);
        } else {
            ele = $("<p>");
            ele.html(lines[i]);
            ele.dblclick(pDblclick); // binding the event to the created p
            $("#opt").append($(ele).draggable());
        }
    }
}

Answer 2

$("p").dblclick(function(){

will only append the handler to paragraphs that exist at the moment you are attaching the handlers. Since you're adding more paragraphs later, unless you want to attach event handlers dynamically as you create new elements, you need to delegate the event handling to some other element, one that exists when you attach the handlers, such as the document. $().on can perform delegation:

$(document).on("dblclick", "p", function(){

If you are using an old version of jQuery, use delegate instead:

$(document).delegate("p", "dblclick", function(){

(you don't need to change anything else than this single line)