如何使用 jquery 在按钮前添加 <textarea>

Question

我有一个 "News Articles" 的简单列表，我希望它可供评论。我创建了一个 "Add Comment" 按钮。

我希望按钮在单击的按钮之前立即创建一个带有 <textarea> 的 <form>，并在单击的按钮之后立即创建一个 "Cancel" 按钮。（我在提出这个问题时想到了这一点）

唯一剩下的就是我希望 "Cancel" 按钮在单击时删除新创建的 <textarea> 及其本身。还有，为了加分，我如何防止 "Add Comment" 按钮出现多个空白 "textareas"?

$(document).ready(function(){
 $(".AddComment").click(function () {
     $("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this);
     $("<button class='CancelComment'>Cancel</button>").insertAfter(this);
 });
 
 $(".CancelComment").click(function (){
  $(this).prev(".Commentary").remove();
  $(this).remove();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>News Entries</title>

</head>
<body>

<h2><a href="#">Killer Rabbit On The Loose</a></h2>
<p>Date: 01/23/2015</p>
<p>Author: Bobert</p>
<p>Subject: Animals</p>
<p>Most Recent Comment: None Yet.</p>
<button class="AddComment">Add Comment</button>

<h2><a href="#">Porsche Unveils Ultra Fast Minivan</a></h2>
<p>Date:02/14/2015</p>
<p>Author: Jimmy</p>
<p>Subject: Cars</p>
<p>Most Recent Comment:</p>
<p>This is genius on Porsche's behalf! I can drop off the kids at school, go grocery shopping and still have time to go racing with my buddies. All without worrying that my emissions aren't falsified and polluting the world.  --SemiProRacer997</p>
<button class="AddComment">Add Comment</button>


<h2> <a href="#">Apple Releases iPhone Inifity</a></h2>
<p>Date:03/11/2015</p>
<p>Author: Frank</p>
<p>Subject: Technology</p>
<p>Most Recent Comment:</p>

<button class="AddComment">Add Comment</button>


</body>
</html>

Answer 1

显示和隐藏已经存在的项目比即时创建并插入它们要好。

Extra credit for not making Add Comment more than one textarea:

$(".AddComment").click(function () {
    $("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this);
    $("<button class='CancelComment'>Cancel</button>").insertAfter(this);
    // Remove the click event and disable the button.
    $(this).off("click").prop("disabled", true);
});

我建议的解决方案：

确保用 post 和 class .comment-box 和 style="display: none;" 加载评论框，并使用以下事件处理程序。

$(".AddComment").click(function () {
  $(this).prev(".comment-box").toggle();
});

此外，您可以让 cancel 按钮具有以下事件处理程序：

$(".cancel").click(function () {
  $(this).closest(".AddComment").hide();
});

Answer 2

最好的解决方案是用 css class 将每个 post 项目包装在一个容器 div 中，我们稍后可以将其用于 jQuery 选择.

<div class="postItem">
  <h2><a href="#">Killer Rabbit On The Loose</a></h2>
  <p>Date: 01/23/2015</p>
  <p>Author: Bobert</p>    
  <button class="AddComment">Add Comment</button>
</div>

<div class="postItem">
  <h2><a href="#">Second post</a></h2>
  <p>Date: 01/23/2015</p>
  <p>Author: Shyju</p>    
  <button class="AddComment">Add Comment</button>
</div>

然后在您的取消按钮单击事件中，获取容器 div，找到表单和取消按钮并将其删除，

$(document).on("click",".CancelComment",function (e){

    var _this = $(this);
    _this.closest(".postItem").find("form").remove();
    _this.remove();       

});

工作样本here

您需要使用 jQuery on 方法在取消按钮上绑定点击事件，因为它们是由您的代码动态创建并注入到 DOM.

Answer 3

我希望表单已经存在，但将其隐藏，以便在您单击按钮时它会出现。然后您可以使用 $('#buttonId').prop('disabled', true);

禁用该按钮

这将阻止任何进一步的点击，尽管这种点击无论如何都无关紧要，因为您只有一个表格要显示，所以它不会再弹出。

点击取消按钮应该会触发一个函数，删除相关文本区域的内容，隐藏 form/textarea 并重新启用评论按钮

show_comment :

function show_comment(){<br>
&nbsp;&nbsp;&nbsp;&nbsp;$('#formId').show();<br>
&nbsp;&nbsp;&nbsp;&nbsp;$('#cancelButton').show();<br>
&nbsp;&nbsp;&nbsp;&nbsp;$('#commentButton').prop('disabled', true)<br>
}

remove_comment:

function remove_comment(){<br>
&nbsp;&nbsp;&nbsp;&nbsp;$('#textareaId').html('');<br>
&nbsp;&nbsp;&nbsp;&nbsp;$('#commentButton').prop('disabled', false);<br>
&nbsp;&nbsp;&nbsp;&nbsp;$('#cancelButton').hide();

}

Answer 4

<script type="text/javascript">
    $('.AddComment').one('click',function(e){
        e.preventDefault();
        var bt=$(this);
        var el=$('<textarea name="comment" />');
        el.insertBefore(this);
        bt.text('Send comment').on('click',function(e){
            if (el.val().length==0){
                alert("Please fill the comment before send.");
                el.focus(); //Delete this row if you don't want user to focus on the textarea.
                return false;
            }
            $.ajax({   
                type: 'POST',
                data : el,
                cache: false,  
                url: 'postUrl.php',
                success: function(data){
                    bt.after($('<b>Comment sent</b>').hide().fadeIn());
                    bt.add(el).hide();

                }   
            })
        })
    })
</script>

Answer 5

您的代码中存在问题。

您正在为页面加载时不存在的取消按钮添加点击功能。添加取消按钮后必须添加点击
您在取消按钮上执行 prev() 操作是错误的。取消按钮的上一个兄弟是添加评论按钮而不是文本区域。

请查看以下代码是否解决了您的问题。添加评论文本区域后，我还会禁用添加按钮，这样您就不会添加更多文本区域

$(document).ready(function(){
 $(".AddComment").click(function () {
            var $addCommentBtn = $(this), 
                $commentTextArea;
            $addCommentBtn.prop( "disabled", true );
     $commentTextArea = $("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this);
     $("<button class='CancelComment'>Cancel</button>").insertAfter(this).click(function (){
  $commentTextArea.remove();
  $(this).remove();
                $addCommentBtn.prop( "disabled", false );
     });
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>News Entries</title>

</head>
<body>

<h2><a href="#">Killer Rabbit On The Loose</a></h2>
<p>Date: 01/23/2015</p>
<p>Author: Bobert</p>
<p>Subject: Animals</p>
<p>Most Recent Comment: None Yet.</p>
<button class="AddComment">Add Comment</button>

<h2><a href="#">Porsche Unveils Ultra Fast Minivan</a></h2>
<p>Date:02/14/2015</p>
<p>Author: Jimmy</p>
<p>Subject: Cars</p>
<p>Most Recent Comment:</p>
<p>This is genius on Porsche's behalf! I can drop off the kids at school, go grocery shopping and still have time to go racing with my buddies. All without worrying that my emissions aren't falsified and polluting the world.  --SemiProRacer997</p>
<button class="AddComment">Add Comment</button>


<h2> <a href="#">Apple Releases iPhone Inifity</a></h2>
<p>Date:03/11/2015</p>
<p>Author: Frank</p>
<p>Subject: Technology</p>
<p>Most Recent Comment:</p>

<button class="AddComment">Add Comment</button>


</body>
</html>

如何使用 jquery 在按钮前添加 <textarea>

How to add <textarea> before button with jquery

javascript

forms

jquery

textarea