js append追加html代码标签后 css样式没生效 js同时没有生效 已解决

html代码

<div class="box">
	<input type="text" name="" value="已经存在的input">
    
</div>
<button>添加input</button>

css代码

.box{
	width: 500px;
	height: 300px;
	border-radius:8px;
	border:1px solid #f0f;
	margin-bottom: 20px;
	padding: 5%;
}
.box input{
	border:0px;
	background: skyblue;
	color: #fff;
	height: 35px;
	border-radius: 8px;
}

js代码

var box = $(".box");
var addBtn = $("button");
addBtn.on("click",function(){
	var appendHtml = '<input type="text" name="" value="追加的input">';
	box.append(appendHtml);

	// 解决样式不生效
	 $(".box").trigger("create");

});


var inputEle = $(".box input");
/*直接这样绑定在input上面  就会出现追加input的点击事件失效

inputEle.on("click",function(){
    alert("niahao");
});*/
    

// 绑定在追加在元苏的父级上面  就可以解决 追加input的点击事件失效
$(".box").on("click","input",function(){
    alert("niahao");
})