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

$("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)