<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.comment{
width: 570px;
height: 73px;
resize: none;
}
</style>
</head>
<body>
<div>
<label>请输入内容：</label>
<textarea class="comment"></textarea>
<input type="button" class="send" value="发布" style="width: 82px;height:30px" disabled>
</div>
<label>message：</label>
<div class="messageList">
<div class="info">
<p class="infoText">一定要拉伸！肱三头肌、三角肌后束、股二头肌（大腿后侧）、股四头肌（大腿前侧）、髂腰肌、臀大肌的对应拉伸动作，运动过后一定肌的拉伸，可以加速乳酸代谢、减缓肌肉延迟性
酸痛、有利于肌肉恢复，每个动作静态拉伸30秒左右，后背挺直，保持均匀呼吸一定要拉伸
！肱三头肌、三角肌后束、股二头肌（大腿后侧）、股四头肌（大腿前侧）、髂腰肌、臀大肌的对应拉伸动作，运动过后一定肌的拉伸，可以加速乳酸代谢、减缓肌肉延迟性酸痛、有利于肌肉恢复，每个动作静态拉伸30秒左右，后背挺直，保持均匀呼吸一定要拉伸！肱三头肌、三角肌后束、股二头肌（大腿后侧）、股四头肌（大腿前侧）、髂腰肌、臀大肌的对应拉伸动作，运动过后一定肌的拉伸，可以加速乳酸代
谢、减缓肌肉延迟性酸痛、有利于肌肉恢复，每个动作静态拉伸30秒左右，后背挺直，保持均匀呼吸</p>
<p class="infoOperator">
<span>"+2018-1-1+"</span>
<input type="button" class="del"><a href="javascript:;">删除</a>
</p>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 监听内容的实时输入,change方法在元素失去焦点的时候才会触发反应；
// $(‘.commen‘).change(function () {
// console.log(this.value);
// })
// 进行事件委托 实时监听输入数据
$(‘body‘).delegate(‘.comment‘,‘propertychange input‘,function () {
// console.log($(this).val());
// 判断是否输入了内容
if( $(this).val().length>0){
$(‘.send‘).prop(‘disabled‘,false)
}else {
$(‘.send‘).prop(‘disabled‘,true)
}
});
// 1监听发布按钮的提交
$(‘.send‘).click(function () {
// 拿到用户输入的内容
var $text=$(‘.comment‘).val();
// 根据内容创建节点
var $weibo= createEle($text);
// 插入微博
$(‘.messageList‘).prepend($weibo);
});
// 2监听顶按钮
$(‘body‘).delegate(‘‘)
// 3监听踩按钮
// 4监听删除按钮
$(‘body‘).delegate(‘.del‘,‘click‘,function () {
$(this).parents(‘.info‘).remove();
})
// 创建节点方法
function createEle(text){/*jquery内部需要使用双引号*/
var $weibo=$("<div class=\"info\">\n" +
" <p class=\"infoText\">"+text+"</p>\n" +
" <p class=\"infoOperator\">\n" +
" <span>"+time()+"</span>\n" +
" <span class=‘del‘><a href=\"javascript:;\">删除</a></span>\n" +
" </p>\n" +
" </div>");
return $weibo;
};
//生成时间的方法
function time() {
var data= new Date();
var arr=[data.getFullYear()+"-",data.getMonth()+1+"-",data.getDate()+‘ ‘];
return arr.join(" ");
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/Damocless/p/11915555.html