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

我有一个简单的“新闻文章”列表，我希望可以用于评论。我创建了一个“添加评论”按钮。如何使用jquery添加按钮之前的<textarea>

我希望按钮创建一个<form>与<textarea>紧接在点击按钮之前，并在点击按钮后立即创建一个“取消”按钮。（我提出了这个问题，同时提出这个问题）

唯一剩下的就是我希望“取消”按钮删除新创建的<textarea>和它自己点击。另外，如何防止“添加评论”按钮制作多个空白的“textareas”？

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

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

来源

2015-12-08 wizkid

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

来源

2015-12-08 16:37:12 Vixed

使用** **一个创建textarea的（一次性），比绑定提交事件。 – Vixed

我试图建立你的建议，因为最终我想通过ajax提交这些信息。我如何确保未创建多个textareas，并且最终如何在textarea中有文本时运行ajax？ – wizkid

我在代码中使用了一个，以防止创建多个textarea。 ajax调用已经在代码中，只需将'postUrl.php'更改为需要接收数据的url即可。 – Vixed

这是更好地显示和隐藏已有的项目，不是动态创建和插入他们。

$(".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); 
});

我提出的解决方案：

确保您加载的评论框与每一个岗位有

不使添加评论超过一个textarea的附加题类.comment-box和style="display: none;"并使用以下事件处理程序。
$(".AddComment").click(function() { 
    $(this).prev(".comment-box").toggle(); 
}); 
此外，您还可以有cancel按钮有以下事件处理程序：
$(".cancel").click(function() { 
    $(this).closest(".AddComment").hide(); 
}); 

来源

2015-12-08 16:23:47

最好的解决办法是在一个div容器每一个岗位的物品包裹，使我们可以使用一个CSS类以后用于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。

来源

2015-12-08 16:26:05 Shyju

我已经有了它的形式，但它已隐藏，所以当你点击按钮它出现。您可以使用$('#buttonId').prop('disabled', true);

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

点击取消按钮应该解雇一个功能，删除了相关textarea的内容，隐藏表单/ 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(); 

}

来源

2015-12-08 16:27:26 Steelone

问题在你的代码。

您正在添加页面加载时不存在的取消按钮的点击功能。添加取消按钮后，您必须添加点击
您正在做取消按钮上的prev（），这是错误的。取消按钮的prev兄弟是添加评论按钮，而不是文本区域。

请参阅下列代码是否修复您的问题。我也禁用添加按钮即可添加注释文本区域，以便您不添加更多的文本区域

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

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

来源

2015-12-08 16:55:08 shinobi

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

回答

相关问题