Question

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

我已经没有想法了。我最初在插入符号时附加了这个，但我不希望人们在我的textarea中运行代码。

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个aragraph。由于您稍后要添加更多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());
        }
    }
}

Jquery附加不适用于动态内容？

2 个答案: