le texte d’entrée est affiché double en divs

quelqu’un peut-il m’aider s’il vous plaît? J’essaie depuis des jours, mais cela ne fonctionne pas correctement. Le problème, c’est que lorsque j’essaie de saisir du texte, il s’affiche en double dans chaque div. Si vous avez besoin d’explications supplémentaires, veuillez demander. essayez de taper quelque chose et vous verrez ce que je veux dire quand je les édite, l’un d’eux change de couleur, l’autre taille et la police sont dus au fait que la classe est différente, chaque div a une classe différente sur le site http: // amp.site88.net/

var z = 1; //value to make div overlappable $('#addText').click(function (e) { /** Make div draggable **/ $('
', { class: 'ui-widget-content', appendTo: '.container', draggable: { containment: 'parent', start: function( event, ui ) { $(this).css('z-index', ++z); } } }); }); $(document).on("dblclick", '.text', function() { $(this).hide(); $(this).closest('.item1').find('.edit_text').val($(this).text()).show(); }); $(document).on("click", ".edit_text", function() { return false; }); $(document).on("click", function() { var editingText = $('.edit_text:visible'); if (editingText.length) { editingText.hide(); editingText.closest('.item1').find('.text').text($(editingText).val()).show(); } }); ko.bindingHandlers.draggable={ init: function(element, valueAccessor, allBindingsAccessor, viewModel) { $(element).draggable(); } }; var z = 1; //value to make div overlappable $('#addText').click(function (e) { /** Make div draggable **/ $('
', { class: 'ui-widget-content', appendTo: '.container', draggable: { containment: 'parent', start: function( event, ui ) { $(this).css('z-index', ++z); } } }); }); $(document).on("dblclick", '.text', function() { $(this).hide(); $(this).closest('.item2').find('.edit_text1').val($(this).text()).show(); }); $(document).on("click", ".edit_text1", function() { return false; }); $(document).on("click", function() { var editingText = $('.edit_text1:visible'); if (editingText.length) { editingText.hide(); editingText.closest('.item2').find('.text').text($(editingText).val()).show(); } }); ko.bindingHandlers.draggable={ init: function(element, valueAccessor, allBindingsAccessor, viewModel) { $(element).draggable(); } }; var vm = function() { var self=this; self.items=ko.observableArray(); self.textContent1 = ko.observable(''); self.textContent2 = ko.observable(''); self.textContent3 = ko.observable(''); self.init = function() { self.items([]); } self.remove = function(item) { console.log(item); self.items.remove(item); } self.addNew = function() { var content = [ self.textContent1(), self.textContent2(), self.textContent3() ].filter(function(item) { return item !== '' }); content.forEach(function(item) { self.items.push(item); }) self.textContent1(''); self.textContent2(''); self.textContent3(''); } } ko.applyBindings(new vm()); $("#fs").change(function() { //alert($(this).val()); $('.item1').css("font-family", $(this).val()); }); $("#size").change(function() { $('.item1').css("font-size", $(this).val() + "px"); }); $('.foo').click(function(){ $('.item2').css("color", $(this).attr('data-color')); }); 

 .item{ width: 200px; height: 200px; padding: 0.5em; background:transparent; z-index: 1; display:block; } .edit_text { display: none; } .edit_text1 { display: none; } .fix_backround { background-color: transparent; } .container { width: 500px; height: 500px; border: 2px solid; position: relative; overflow: auto; }  .thumbs img{ margin:3px; width:50px; float:left; }  .bottlesWrapper img{ margin:3px; width:400px; float:left; } #main { border:1px solid #eee; margin:20px; width:410px; height:220px;}   .transparent { background:transparent }  .foo { float: left; width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0, 0, 0, .2); } .white { background: #FFFFFF; } .yellow { background: #FAFF38; } .orange { background: #FFA200; } .red { background: #FF0000; } .dorange { background: #FF5500; } .lgreen { background: #80FF00; } .green { background: #45C731; } .turk { background: #17DDBC; } .lblue { background: #00A2FF; }.blue { background: #1713F6; }.purple { background: #AB09D3; }.black { background: #000000; }  #mainTarget{ width:30px; height:20px; position:relative; top:100px; left:25% } .mainTarget{position:absolute; width:25px; height:25px;} #target{ position:absolute; height:25px; width:25px; background:url(http://soffr.miximages.com/javascript/object-rotate-left.png) no-repeat top center #ffffff; background-size:100%; cursor:pointer; z-index:1; top:1; right:1; }  

 <form method="post" action=""> 
 
 
 
 
 
 
 
 
 
 
 
 
 
  Agency FB Algerian AR Berkley AR Blanca AR Bonnie AR Carter AR Cena   8 9 10 11   
  
 
  
 Generate New Div 
 
 
 X 
 
    
 
 X 
 
    
 
 
       

• Élément de menu de deuxième niveau utilisant ul li ne fonctionnant pas
• L’affichage des options ne fonctionne pas en safari
• Changer bg à la radio désélectionner
• Police de style pour le champ de saisie (Angularjs)
• L’animation de chargement de page pour masquer le processus de chargement de page complète se termine bien avant qu’elle ne disparaisse

 var z = 1; //value to make div overlappable var i = 0; $('#addText').click(function(e) { /** Make div draggable **/ $('
', { class: 'ui-widget-content', appendTo: '.container', draggable: { containment: 'parent', start: function(event, ui) { $(this).css('z-index', ++z); } } }); i++; }); $(document).on("dblclick", '.text', function() { $(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show(); }); $(document).on("click", ".edit_text", function() { return false; }); $(document).on("click", function() { var editingText = $('.edit_text:visible'); if (editingText.length) { editingText.hide(); editingText.closest('.item').find('.text').text($(editingText).val()).show(); } }); ko.bindingHandlers.draggable = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { $(element).draggable(); } }; var vm = function() { var self = this; self.items = ko.observableArray(); self.textContent1 = ko.observable(''); self.textContent2 = ko.observable(''); self.textContent3 = ko.observable(''); self.init = function() { self.items([]); } self.remove = function(item) { console.log(item); self.items.remove(item); } self.addNew = function() { var content = [ self.textContent1(), self.textContent2(), self.textContent3() ].filter(function(item) { return item !== '' }); content.forEach(function(item) { self.items.push(item); }) self.textContent1(''); self.textContent2(''); self.textContent3(''); } } ko.applyBindings(new vm()); $("#fs").change(function() { //alert($(this).val()); $('.item').css("font-family", $(this).val()); }); $("#size").change(function() { $('.item').css("font-size", $(this).val() + "px"); }); $('.foo').click(function() { $('.item').css("color", $(this).attr('data-color')); }); 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  Agency FB Algerian AR Berkley AR Blanca AR Bonnie AR Carter AR Cena   8 9 10 11  
 
  
 Generate New Div 
 
 
 X 
 
     
 
  

 $('#addText').click(function (e) { /** Make div draggable **/ $('
', { class: 'ui-widget-content', appendTo: '.container', draggable: { containment: 'parent', start: function( event, ui ) { $(this).css('z-index', ++z); } } }); });