OnClick generate a new element with each click, instead of resetting the first one

Question

OnClick generate a new element with each click, instead of resetting the first one

Navigation

#1 by (0 votes)

0

I'm just finished creating a WYSIWYG, but I have a problem with the text box. Clicking on the icon for the text box triggers a onClick that creates the text box, which is created with an% ed_config - div (I had problems with contenteditable="true" ).

My problem is: When I click the new icon, I need it to create another text box instead of simply deleting the current one.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!DOCTYPEhtml><html><head><metacharset="utf-8">          
    </head>
 
    <body>
      <script>
        function ctexto() {
    
    document.getElementById("editavel").innerHTML =
   '<div class="ui-widget-content, draggable">Arrastar<div  id="divv" class="" contenteditable="true" >Este é um texto de teste</div></div>';
        
         $(".draggable")
    .draggable()
    .click(function(){
        if ( $(this).is('.ui-draggable-dragging') ) {
            return;
        }
        $(this).draggable( "option", "disabled", true );
        $(this).attr('contenteditable','true');
        $(this).attr('resizable','false');
            
    })
    .blur(function(){
        $(this).draggable( 'option', 'disabled', false);
        $(this).attr('contenteditable','false');
    });
}
        </script>
      
        <input type="button" onClick="ctexto()" value="Texto">
        <div name="editavel" id="editavel"></div>
    </body>

</html>

This code here is a bit misfit, but you should understand the script.

javascript jquery

asked by anonymous 07.12.2015 / 03:10

1 answer

Problems in identifying the file with errors in the chrome dev tools Crux Framework - Doubt when creating my own component

score 0 · Accepted Answer

You can do this using jQuery .append() , as follows:

$('#editavel').append('<div class="ui-widget-content, draggable">Arrastar<div  id="divv" class="" contenteditable="true" >Este é um texto de teste</div></div>');

All along, the JavaScript code should look something like this:

function ctexto() {

    $('#editavel').append('<div class="ui-widget-content, draggable">Arrastar<div  id="divv" class="" contenteditable="true" >Este é um texto de teste</div></div>');

         $(".draggable")
    .draggable()
    .click(function(){
        if ( $(this).is('.ui-draggable-dragging') ) {
            return;
        }
        $(this).draggable( "option", "disabled", true );
        $(this).attr('contenteditable','true');
        $(this).attr('resizable','false');

    })
    .blur(function(){
        $(this).draggable( 'option', 'disabled', false);
        $(this).attr('contenteditable','false');
    });
}

Here are two examples of working code:

Using jQuery

function ctexto() {
    
    $('#editavel').append(
   '<div class="ui-widget-content, draggable">Arrastar<div  id="divv" class="" contenteditable="true" >Este é um texto de teste</div></div>');

         $(".draggable")
    .draggable()
    .click(function(){
        if ( $(this).is('.ui-draggable-dragging') ) {
            return;
        }
        $(this).draggable( "option", "disabled", true );
        $(this).attr('contenteditable','true');
        $(this).attr('resizable','false');

    })
    .blur(function(){
        $(this).draggable( 'option', 'disabled', false);
        $(this).attr('contenteditable','false');
    });
}

#editavel {
    border: 2px solid aqua;
    width: 450px;
    height: 550px;
  
}
#divv {
    top: 60px;
    border: 1px dashed #999999;
    height: 150px;
    width: 400px;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 9000;
    resize: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><inputtype="button" onClick="ctexto()"  value="Texto">
<div name="editavel" id="editavel"></div>

Same solution with pure JavaScript

function ctexto() {
    
    var el = document.getElementById('editavel'),
    // Cria uma nova div
    elChild = document.createElement('div');
    // Give the new div some content
    elChild.innerHTML = '<div class="ui-widget-content, draggable">Arrastar<div  id="divv" class="" contenteditable="true" >Este é um texto de teste</div></div>';

    // Jug it into the parent element
    el.appendChild(elChild);

        
         $(".draggable")
    .draggable()
    .click(function(){
        if ( $(this).is('.ui-draggable-dragging') ) {
            return;
        }
        $(this).draggable( "option", "disabled", true );
        $(this).attr('contenteditable','true');
        $(this).attr('resizable','false');
            
    })
    .blur(function(){
        $(this).draggable( 'option', 'disabled', false);
        $(this).attr('contenteditable','false');
    });
}

#editavel {
    border: 2px solid aqua;
    width: 450px;
    height: 550px;
  
}
#divv {
    top: 60px;
    border: 1px dashed #999999;
    height: 150px;
    width: 400px;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 9000;
    resize: both;
}

<sup>Podes acessar <a href="http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/" target="_blank">este link</a> para saber mais sobre esta versão.</sup><br />
<input type="button" onClick="ctexto()"  value="Texto">
<div name="editavel" id="editavel"></div>