如何添加<text区域>使用jquery的before按钮
How to add <textarea> before button with jquery
我有一个简单的"新闻文章"列表，我希望可以对其进行评论。我创建了一个"添加评论"按钮。
我希望该按钮在单击按钮之前立即创建一个带有<textarea>的<form>，并在单击按钮之后立即创建"取消"按钮。（我在提出这个问题时发现了这一点）
唯一剩下的是，我希望"取消"按钮在单击时删除新创建的<textarea>及其本身。对于额外的信用，我如何防止"添加评论"按钮产生多个空白的"文本区域"？
$(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><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>
显示和隐藏已经存在的项比动态创建并插入它们要好。
没有使添加评论超过一个文本区域的额外信用：
$(".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);
});
我提出的解决方案：
确保使用类.comment-box和style="display: none;"加载每个帖子的注释框，并使用以下事件处理程序。
$(".AddComment").click(function () {
$(this).prev(".comment-box").toggle();
});
此外，您可以使用cancel按钮来具有以下事件处理程序：
$(".cancel").click(function () {
$(this).closest(".AddComment").hide();
});
最好的解决方案是用css类将容器div中的每个post项包装起来，我们稍后可以使用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();
});
此处为工作样品
您需要使用jQueryon方法来绑定取消按钮上的点击事件，因为它们是由代码动态创建并注入DOM的。
我会把表单放在那里，但要把它隐藏起来，这样当你点击按钮时它就会出现。然后可以使用$('#buttonId').prop('disabled', true); 禁用该按钮
这将阻止任何进一步的点击，尽管点击无论如何都不重要，因为你只有一个表单可以显示，所以它不会再弹出。
单击取消按钮应启动一个功能，删除有问题的文本区域的内容，隐藏表单/文本区域，并重新启用评论按钮
show_comment:
function show_comment(){<br>
$('#formId').show();<br>
$('#cancelButton').show();<br>
$('#commentButton').prop('disabled', true)<br>
}
remove_comment:
function remove_comment(){<br>
$('#textareaId').html('');<br>
$('#commentButton').prop('disabled', false);<br>
$('#cancelButton').hide();
}
代码中的问题。
- 您正在为页面加载中不存在的取消按钮添加单击功能。添加取消按钮后，您必须添加单击
- 您正在对取消按钮执行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>相关文章：
- 为什么要使用0>javascript中的0
- 如何更改<选择>使用angularJS从控制器获得的值
- 使用下拉列表筛选列表(ul>li）
- 使用Javascript，如何显示<tr>在另一<tr>悬停时，隐藏第二个<tr>
- 使用<ahref>使用谷歌脚本在谷歌表单GUI中标记
- W3验证器->使用<脚本类型＝“;text/javascript”>在html的正文中
- Typescript angularjs$http获取响应类型(避免使用<any>）
- 如何逃离<脚本>jquery html(）中的标记.我使用了innerHTML和outerHTML来解决这个
- 选择<李>使用普通JavaScript的子节点，而不是孙节点
- 有没有一种方法可以检测ios<>使用jquery和触发器操作形成导航按钮
- 为什么当CRLF被分配到<输入>使用php
- 使用<按钮>
- 单击事件在替换<使用>元素在<svg>(Win7/IE11）
- jQuery选择器，用于使用>或者<
- 如何使用'>'以重定向Node.js中的输出
- SVG<动画>当使用<使用>
- 如何使用“>"AngularJS ng-if语句中的比较器
- 用于在使用`>之前检查模块的备选方案>`
- Mongoexport对日期范围使用$gt和$lt约束
- 何时使用>>在javascript中
