Question

Using jQuery, I make these changes in the DOM:

  $(document).ready(function() {
     $('.editable').click(function() {
        var a = $(this).find('a');
        var div = $(this).find('div');
        var str = a.text();                                                      
        if ( str == "Edit" ) {
          var cadena = div.text();
          div.empty();                                                         
          div.append('<textarea class="span10" rows="8">'+cadena+'</textarea>');
          a.html("Save");
        }
     });
  });

on this HTML:

  <div class="editable" id="ubication">                                  
     <div> test text</div>
     <a href="" >Edit</a>
  </div>

When I click the ‘Edit’ link, the textarea is inserted, but it disappears after a few seconds. How do I prevent this?

Answer 1

The problem is that

<a href="">…</a>

isn’t a link that, when clicked, does nothing. It’s a link to the current URL. The textarea doesn’t disappear after a moment, the page reloads.

To fix it, use something like:

<a href="javascript:void(0)">…</a>

I updated your example to illustrate this: http://jsfiddle.net/inerdial/GPj49/2/