jQuery 解決 動態創建的元素添加不了事件 問題

如下面的例子,使用add方法創建的button標籤是添加不了click事件的

<html>
<head>
</head>
<body>
<p class="pWrap">這是一個段落。
	<button class="btn">按鈕</button>
</p>

<button onclick="add()">add</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

  $(".btn").on("click", function(){
    alert(1)
  });


function add() {
	$('.pWrap').append('<button class="btn">按鈕</button>')
}
</script>
</html>

解決辦法,給父級添加事件 on傳第二個參數,也即該元素的選擇器

<html>
<head>
</head>
<body>
<p class="pWrap">這是一個段落。
	<button class="btn">按鈕</button>
</p>

<button onclick="add()">add</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

  $(".pWrap").on("click", '.btn',function(){
    alert(1)
  });


function add() {
	$('.pWrap').append('<button class="btn">按鈕</button>')
}
</script>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章