Remplacez DIV dans un autre DIV par TEXTAREA, modifiez le texte et remplacez

Lorsque vous cliquez sur ADD, un DIV est ajouté au conteneur. Ce DIV contient deux divs – MENU div et EDIT div.

Focus EDIT div – Je veux remplacer ce EDIT Div par TEXTAREA et insérer du texte de EDIT DIV dans ce TEXTAREA. Puis tapez du texte et sur le flou, je souhaite remplacer TEXTAREA par DIV – et insérer le nouveau texte modifié de TEXTAREA dans cette EDIT DIV.

Mais j’ai deux problèmes:

Avec ciblage. Parce que le texte de MENU est en train d’être inséré dans TEXTAREA et que MENU DIV disparaît.
Lorsque j’utilise doubleclick pour la première fois pour modifier DIV et TEXTAREA, la prochaine fois que cela se produit, il suffit d’un simple clic. Pourquoi et comment le réparer?

jsFIDDLE DEM

HTML

 add new

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(""+text_from_DIV+""); $("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 $(' MENU 
Click here to edit
').dblclick(handler4).draggable({ containment: "#container", scroll: false, cursor: 'lock', opacity: 0.55, grid: [2, 2] }).resizable(); }); } });

Pour le point 2:

Lorsque j’utilise doubleclick pour la première fois pour modifier DIV et TEXTAREA, la prochaine fois que cela se produit, il suffit d’un simple clic. Pourquoi et comment le réparer?

C’est parce que dans votre code vous accrochez un événement de double-clic sur div et que dans l’implémentation de cet événement ( handler4 ) vous liez un événement de simple clic, ce qui entraîne l’exécution de la fonctionnalité sur un seul clic.

Pour le point 1:

Avec ciblage. Parce que le texte de MENU est en train d’être inséré dans TEXTAREA et que MENU DIV disparaît.

Eh bien, c’est parce que vous prenez le texte de la div et que le menu est à l’intérieur de cette div

Ci-dessous la fonction modifiée pour vous.

 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("" + text_from_DIV + ""); $("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); }); } }

J’ai supprimé le gestionnaire de clics supplémentaire et apporté quelques modifications pour conserver le menu intact.

Voici le violon

EDIT : ajout d’un événement de double clic sur la zone de texte pour arrêter la propagation à l’événement de double clic de la division parent

Vous pouvez essayer comme cet exemple

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