用TEXTAREA替换另一个DIV中的DIV，编辑文本并将其替换回来 [英] Replace DIV inside another DIV with TEXTAREA, edit text and replace back
问题描述
当你点击添加时，一些DIV被添加到容器中。 此DIV包含
$ b 关注焦点编辑 div - 我想用TEXTAREA 替换此EDIT Div ，并从EDIT DIV插入文本到此TEXTAREA。要输入一些文本和模糊，我希望用TEX替换TEXTAREA - 并将新编辑的文本从TEXTAREA插入到此EDIT DIV中。
但我有两个问题：
- 通过定位。
- 当我第一次使用doubleclick来改变DIV和TEXTAREA时，下次它只是简单的点击而发生。为什么以及如何解决它？
HTML
< div id =addstyle =background：yellow; width：100px;>添加新的< / div>
< div id =container> < / DIV>
jQUERY
function handler4（）{
var edited_DIV = $（this）;
$（edited_DIV）.live（{
click：function（）{
if（$（this）.children（'textarea'）。length === 0）{$ b $ （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）;
}）;
}
}
}）; $ {
}
$ b $（＃add）。on（{
click：function（e）{
var timestamp = Date.now ）;
var posx = Math.floor（Math.random（）* 400）;
var posy = Math.floor（Math.random（）* 400）;
$（' （'）{
return $（'< div class =add_to_thisid ='+ timestamp +'style =left：'+ posx +'px; top：' + posx +'px;>< div id =edit_div>< div id =menustyle =color：red;>< b> MENU< / b>< div>点击这里编辑< / div>< / div>'）。dblclick（handler4）.draggable（{
containment：#container，
scroll：false，
cursor ：'lock'，
opacity：0.55，
grid：[2，2]
}）。resizable（）;
}）;
}
}）;
对于第2点：
当我第一次使用doubleclick来更改DIV和TEXTAREA时，下次只需简单点击即可发生
。为什么以及如何解决这个问题
？
这是因为在你的代码中，你在div上挂钩了双击事件，在执行该事件（ handler4 ）时，您绑定的是单击事件，导致该功能在单击时运行。
<对于第一点：
使用定位。从菜单中选择的文本插入到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 （）卸下摆臂（）（）结尾的文本（）。;
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的双击事件
When you click on ADD, some DIV is added to the Container. This DIV contain two divs - MENU div and EDIT div.
On focus EDIT div - I want to replace this EDIT Div with TEXTAREA and insert text from EDIT DIV to this TEXTAREA. Than type some text and on blur I want replace TEXTAREA back with DIV - and insert new edited text from TEXTAREA to this EDIT DIV.
But I have two problems :
- With targeting. Becouse text from MENU is inserting to TEXTAREA and MENU DIV disappears.
- When I use doubleclick for the first time to change DIV and TEXTAREA, next time it is happening just on simple click. Why and how to fix it ?
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();
});
}
});
For point 2:
When I use doubleclick for the first time to change DIV and TEXTAREA, next time it is happening just on simple click. Why and how to fix it ?
It is because in your code you are hooking a double click event on div and in the implementation of that event (handler4) you are binding single click event which causes the functionality to run on single click
For Point 1:
With targeting. Becouse text from MENU is inserting to TEXTAREA and MENU DIV disappears.
Well, that is because you are taking text of the div and menu is inside that div
Below is the modified function for you.
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);
});
}
}
I have removed the extra click handler and made some modifications to keep the menu intact.
Here is the fiddle
EDIT: added double click event on text area to stop propagation to parent div's double click event
这篇关于用TEXTAREA替换另一个DIV中的DIV，编辑文本并将其替换回来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
