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