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

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