剛剛使用 jquery .html() 在我的 HTML 代碼中添加了新元素，但無法從這個新元素中獲取資料屬性。
插圖：
<div class="row" id="append">
<div class="col-12" id="newElement">
<button>Add new element</button>
</div>
<div class="col-md-3 see-id">
<button data-id="0.901065887770927">Check ID</button>
</div>
</div>
<script>
$(document).ready(function(){
$('.see-id').click(function(){
alert($(this).data('id'));
})
$('#newElement').click(function(){
var rand = Math.random();
$('#newElement').after('<div ><button data-id="' rand '">Check ID</button></div>');
})
})
</script>
如何從剛剛使用 DOM 添加的新元素中獲取資料屬性？
uj5u.com熱心網友回復：
因為您要向檔案添加新的 HTML，所以您需要使用事件委托來獲取資料。將偵聽器附加到父元素，在本例中為.row。但是您還需要定位按鈕，因此您的選擇器應該是.see-id button.
注意：我已經分離出 HTML 以便查詢可以更好地作業。在.rowdiv 中以前的按鈕之前添加了新按鈕，當您單擊它們時可能會產生誤導性結果。在這個例子中，我append改為使用。
$(document).ready(function() {
$('.row').on('click', '.see-id button', function () {
const id = $(this).data('id');
console.log(id);
});
$('#newElement').on('click', function () {
const rand = Math.random();
$('.row').append(`<div ><button data-id="${rand}">Check ID</button></div>`);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newElement">
<button>Add new element</button>
</div>
<div class="row"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343473.html
標籤：javascript html 查询 dom 属性
上一篇：tinymce自動串列項