jquery - Jquery append 不适用于动态内容？

Question

嗨，我正在制作一个 Web 应用程序，并且有设置变量的按钮。我希望将变量添加到我使用行拆分创建的 div 或元素中。我已经尝试过，但现在成功了，我尝试将 div 从“P”更改为 D，但它不起作用。我也尝试过双击，以免干扰单击。

我已经没有想法了。我最初在插入符号处添加了此内容，但我不希望人们在我的文本区域中运行代码。

这是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(){

只会将处理程序附加到p您附加处理程序时存在的aragraphs。由于您p稍后要添加更多 aragraph，除非您想在创建新元素时动态附加事件处理程序，否则您需要将事件处理委托给其他一些元素，即附加处理程序时存在的一个元素，例如document. $().on可以执行委托：

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

如果您使用的是旧版本的 jQuery，请delegate改用：

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

（除了这一行之外，您无需更改任何其他内容）

Answer 2

执行此行时，绑定$("p").dblclick()仅绑定到所有现有元素。 p因此，您的函数中所有新创建p的元素spitline都不会与任何事件绑定。创建时需要为每个元素绑定dblclick事件。 p

您的代码可以这样修改：

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