jquery временная модификация DOM

Question

Используя jQuery, я делаю эти изменения в 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");
        }
     });
  });

в этом HTML:

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

Когда я нажимаю ссылку «Изменить», текстовая область вставляется, но исчезает через несколько секунд. Как мне это предотвратить?

Answer 1

Проблема в том, что

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

не является ссылкой, которая при нажатии ничего не делает. Это ссылка на текущий URL. Текстовая область не исчезает через мгновение, страница перезагружается.

Чтобы исправить это, используйте что-то вроде:

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

Я обновил ваш пример, чтобы проиллюстрировать это: http://jsfiddle.net/inerdial/GPj49/2/

Answer 2

Вы можете использовать javascript:void(0) в ссылке, но это очень элегантно для предотвращения внутреннего кода javascript:

$('.editable').click(function(e) {
  e.preventDefault();
  ...
});

http://jsfiddle.net/sxua/GPj49/3/