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>

当我点击“编辑”链接时，会插入textarea，但几秒钟后就会消失。我该如何防止这种情况？

Answer 1

问题在于

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

不是一个链接，当点击时，什么都不做。它是指向当前URL的链接。片刻重新加载后，textarea不会消失。

要解决此问题，请使用以下内容：

<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/

jquery时间修改DOM

2 个答案: