Question

在下面的代码中，当我尝试将val（）设置为空字符串：val（“”）时，代码中断并且不附加表单。但实际上，当附加表单时，表单的输入值被克隆，这是我不想要的，并且试图用val（“”）删除，但无济于事。我尝试寻找类似的问题，但我认为它们不代表我的情景。

HTML：

<form id="postcomment" method="post" action="">
    <!-- form displayed here -->

    <p>
        <input type="submit" value="Post" /></p>
</form>

<ul id="commenters">
    <li id="user_id">
        <p class="poster">SomeUser - time_post_submitted</p>
        <p>...</p>
        <p><a href="" class="reply">reply</a></p>
    </li>
</ul>

使用Javascript：

$(document).ready(function () {
        $("#commenters").on("click", ".reply", function (event) {
            event.preventDefault();
            var form = $("#postcomment").clone();
            form.find('.parent').val($(this).parent().parent().attr('user_id'));
            $(this).parent().append(form);
        });
    });

编辑：http://www.maxburstein.com/blog/django-threaded-comments/

为清晰起见添加链接。我按照这个例子来到了这封信，但是我遇到了我想在这里解决的问题

Answer 1

你知道reset()功能吗？

这个怎么样：

$(document).ready(function(){
   $("#commenters").on("click", ".reply", function(event){
      event.preventDefault();
      var $form = $("#postcomment");
      $form[0].reset();

      $form.find('.parent').val($(this).parent().parent().attr('user_id'));
      $(this).parent().append($form.clone());
   });
});

Answer 2

<强> WORKING DEMO

$(document).ready(function () {
        $("#commenters").on("click", ".reply", function (event) {
            event.preventDefault();
            // in case you want to clear the original form as well
            $("form#postcomment")[0].reset();
            var form = $("#postcomment").clone();
            form[0].reset();
            form.find('.parent').val($(this).parent().parent().attr('user_id'));
            $(this).parent().append(form);
        });
    });

基于评论的更新

$(function() {
  $("body").on("click submit", "input[type='submit']", function(ev) {
    ev.preventDefault();
    var $el = $(this).parent().find("input[type='text']");
    var comment = $el.val();
    var temp = '<li id="user_id"><p class="poster"></p>'+comment+'<br><a href="" class="reply">reply</a></li>';
    if($($(this).parent()[0]).hasClass('replyform')) {
       $(this).parent().parent().append(temp);
    } else {
    $("ul#commenters").append(temp);  
    }
    $el.val("");
    $("ul#commenters .reply").show();
    $("ul#commenters form").hide();
  });

   $("#commenters").on("click", ".reply", function (event) {
            event.preventDefault();
            // in case you want to clear the original form as well
     $(this).hide();
            $("form#postcomment")[0].reset();
            var form = $("#postcomment").clone();
            $(form[0]).addClass("replyform");
            form[0].reset();
            form.find('.parent').val($(this).parent().parent().attr('user_id'));
            $(this).parent().append(form);
        });

});

HTML：

<form id="postcomment" method="post" action="">

        <input type="text" name="formva">
        <input type="submit" value="Post" />
</form>
<ul id="commenters">

</ul>

<强> UPDATED DEMO

jQuery - 清除克隆的表单值

2 个答案: