0

こんにちは私はWebアプリケーションを作成していて、変数を設定するボタンがあります。行分割を使用して作成したdivまたは要素に変数を追加したいと思います。試しましたが、成功したので、divを「P」からDに変更しようとしましたが、機能しません。また、シングルクリックの邪魔にならないようにダブルクリックを試みました。

アイデアが足りなくなった。私はもともとこの追加をcaretで行っていましたが、テキストエリア内でコードを実行してほしくないのです。

これが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();
        }
    });
});
4

2 に答える 2

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

pハンドラーをアタッチしている時点で存在するアラグラフにのみハンドラーを追加します。p後でさらにaragraphsを追加するので、新しい要素を作成するときにイベントハンドラーを動的にアタッチする場合を除いて、イベント処理を他の要素（ハンドラーをアタッチするときに存在する、など）に委任する必要がありますdocument。$().on委任を実行できます：

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

古いバージョンのjQueryを使用している場合は、delegate代わりに次を使用してください。

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

（この1行以外は変更する必要はありません）

于 2013-01-18T14:41:26.370 に答える
1

この行が実行されると、バインディングは既存の$("p").dblclick()すべての要素にバインドするだけです。したがって、関数から新しく作成されたすべての要素がイベントにバインドされることはありません。作成するときに、各要素のイベントをバインドする必要があります。 ppspitlinedblclick 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());
        }
    }
}
于 2013-01-18T14:40:15.463 に答える