Question

我想在顶部的另一个DIV中插入<div><p>Test</p></div>。所以我试试

$(document).ready(function(){
  $('form').live('submit', function(){
    var aform      = $(this);
    $('#w').append('<div><p>Test</p></div>');
  });
});

HTML看起来像

<div id="w">
  <div><p>Test</p></div>
</div>

当我这样做时，它会被插入，但会立即消失。

尝试单击此示例中的“保存”按钮。

http://jsfiddle.net/Rv2w7/

Answer 1

使用prepend()并取消提交：

$(document).ready(function(){
  $('form').live('submit', function(){
    var aform      = $(this);
    $('#w').prepend('<div><p>Test</p></div>');
    return false; //cancel `real` submit
  });
});

Answer 2

页面在提交时重新加载。这就是动态插入标签消失的原因。

Answer 3

您需要取消默认操作以阻止表单提交：

$(document).ready(function() {
    $('form').live('submit', function() {
        var aform = $(this);
        $('#w').append('<div><p>Test</p></div>');
        return false;
    });
});

更新示例：http://jsfiddle.net/Rv2w7/2/

需要

return false;或event.preventDefault()来阻止live()的默认操作。

Answer 4

由于您的表单每次都会提交，因此您需要阻止默认操作：

$(document).ready(function(){
  $('form').live('submit', function(event){
    var aform      = $(this);
    $('#w').append('<div><p>Test</p></div>');
    event.preventDefault();
  });
});

Answer 5

点击页面提交的保存按钮后，这就是它“消失”的原因。之所以会发生这种情况，是因为对当前HTML的修改只会持续到页面更改或刷新，因为将向服务器发出新的GET，并且将检索未更改的HTML版本，覆盖您的更改。

要将某些内容永久保存到HTML中，您需要使用服务器端编程语言;让你的程序检索以前保存的字符串到cookie或会话;使程序从数据库等加载数据

为什么HTML会消失？

5 个答案: