0

ADD をクリックすると、コンテナに DIV が追加されます。この DIV には、MENU div とEDIT divの 2 つのdiv が含まれています。

フォーカス EDIT div -この EDIT Div を TEXTAREA に置き換え、EDIT DIV からこの TEXTAREA にテキストを挿入したいと考えています。いくつかのテキストを入力し、ぼかしでTEXTAREA を DIV に戻し、 TEXTAREA から新しい編集済みテキストをこの EDIT DIV に挿入します。

しかし、私には2つの問題があります:

  1. ターゲティングあり。MENU からのテキストが TEXTAREA に挿入され、MENU DIV が消えるためです。
  2. 初めてダブルクリックを使用して DIV と TEXTAREA を変更すると、次回は単純なクリックだけで変更されます。なぜ、どのように修正するのですか？

jsFIDDLE DEM

HTML

<div id="add" style="background:yellow; width:100px;"> add new </div>
<div id="container"> </div>

jQuery

function handler4(){
    var edited_DIV = $(this);
    $(edited_DIV).live({
        click: function() {
            if ($(this).children('textarea').length === 0) {
                var text_from_DIV = $(edited_DIV).find("#edit_div").text();
                $(this).html("<textarea class='inputbox' >"+text_from_DIV+"</textarea>");
                $("textarea.inputbox").focus();
                $("textarea.inputbox").blur(function() {
                    var text_from_TEXTAREA = $(this).val();
                    $(edited_DIV).text(text_from_TEXTAREA);
                });
            }
        }
    });
}


$("#add").on({
   click: function(e) {
        var timestamp = Date.now();
        var posx = Math.floor(Math.random() * 400);
        var posy = Math.floor(Math.random() * 400);
        $('#container').append(function() {
            return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posx + 'px; "><div id="edit_div"><div id="menu" style="color:red;"><b> MENU </b></div>Click here to edit</div></div>').dblclick(handler4).draggable({
                containment: "#container",
                scroll: false,
                cursor: 'lock',
                opacity: 0.55,
                grid: [2, 2]
            }).resizable();
        });
    }
});
4

2 に答える 2

2

この例のように試すことができます

JavaScript:

$("#edit").live("click",function(){
    $(".inputbox").val($("#menu").text()).show();
    $("#menu").hide();
    $("#save").show();
    $(this).hide();
});

$("#save").live("click",function(){   
    $("#menu").show();
    $("#menu b").html($(".inputbox").val());
    $(".inputbox").hide();
    $("#edit").show();
    $(this).hide();    
});
于 2013-06-12T10:12:19.107 に答える
1

ポイント 2 の場合:

初めてダブルクリックを使用して DIV と TEXTAREA を変更すると、次回は単純なクリックだけで変更されます。なぜ、どのように修正するのですか？

これは、コードで div にダブルクリック イベントをフックしていて、そのイベント ( handler4) の実装で、シングル クリックで機能を実行させるシングル クリック イベントをバインドしているためです。

ポイント 1 の場合:

ターゲティングあり。MENU からのテキストが TEXTAREA に挿入され、MENU DIV が消えるためです。

それは、div のテキストを取得していて、メニューがその div 内にあるためです。

以下は、変更された関数です。

function handler4() {
    var edited_DIV = $(this);
    if ($(this).children('textarea').length === 0) {
        var text_from_DIV = $(edited_DIV).find("#edit_div").clone().children().remove().end().text();
        var menu = $(this).find("#edit_div").find('#menu');
        $(this).find("#edit_div").text('').append(menu).append("<textarea class='inputbox' >" + text_from_DIV + "</textarea>");
        $("textarea.inputbox").focus();
        $("textarea.inputbox").dblclick(function (event) {
            return false;
        });
        $("textarea.inputbox").blur(function () {
            var text_from_TEXTAREA = $(this).val();
            $(edited_DIV).find("#edit_div").text(text_from_TEXTAREA).prepend(menu);
        });
    }
}

余分なクリック ハンドラーを削除し、メニューをそのまま維持するためにいくつかの変更を加えました。

ここにフィドルがあります

編集: テキスト領域にダブルクリック イベントを追加して、親 div のダブルクリック イベントへの伝播を停止しました

于 2013-06-12T10:23:50.340 に答える