Onclick generate a new element every click, instead of resetting the first

Asked

Viewed 294 times

0

I’m finishing creating a WYSIWYG, but I have a problem with the text box.

When clicking on the icon referring to the text box, a onClick which creates the text box, which is created with a div editable - contenteditable="true" (had problems with the textarea).

My problem is: By clicking the icon again, 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>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="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 little poorly adapted, but should give to understand the script.

javascript jquery

1 answer

0


You can do this using the .append() jQuery, 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 together, 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 code in operation:

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>
<input type="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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.