假設我想轉換所有（現有的和動態創建的）<a>具有data-params屬性的標簽，例如通過設定href屬性。
似乎這段代碼：
$('body').on('change', 'a[data-params]', function() { ... })
僅適用于動態創建的元素，不適用于現有元素。
另一方面，這段代碼：
$('a[data-params]').each(function(index) { ... });
僅適用于現有元素。
因此，如果我想要兩個（現有的和動態創建的），我需要兩個代碼，理想情況下首先定義我的轉換函式，然后：
$('a[data-params]').each(function(index) { processDataParams(this); });
$('body').on('change', 'a[data-params]', function() { processDataParams(this); });
還是我錯過了一些更簡單的方法來做到這一點？
uj5u.com熱心網友回復：
$('a[data-params]')回傳具有此資料屬性的所有節點。總是。
我認為問題是在創建動態元素之前。data添加元素時避免使用 jQuery方法，因為它不會更新 DOM（不會添加所需的data-params屬性）。
// Add some elements to the current doc
['magenta', 'olive'].forEach(color => {
$('<a>', {html:color})
// .data('params', color) <-- this don't updates de DOM, ?? jQuery
.attr('data-params', color)
.appendTo('#root')
})
// Element unable to find with $('a[data-params]')
$('<a>', {html: 'This elemnt won\'t update'})
.data('params', 'purple')
.appendTo('#root')
function transform() {
$('a[data-params]').each((i, node) => {
$(node).css('color', $(node).data('params'))
$(node).attr('href', '#' $(node).data('params'))
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; flex-direction: column" id="root">
<a data-params='red'>red</a>
<a data-params='blue'>blue</a>
<a data-params='green'>green</a>
</div>
<hr>
<button onclick="transform()">Transform Elements</button>使用@Spectric和@RokoC.Buljan的更正進行編輯。謝謝大家。
uj5u.com熱心網友回復：
您可以使用 Jquery 事件委派在元素的所有子（內部）元素上運行代碼（事件偵聽器），無論它們是否已經存在（因為它在父元素上的設定已經存在）。您可以在 JQuery 的檔案中閱讀有關事件委托的更多資訊 - https://learn.jquery.com/events/event-delegation/
例子：
$('ul').on('click', 'li', function(event) {
//code that will run on al <li> element clicks
});
此代碼設定在 ul 元素上，并允許為 ul 內的所有當前和未來 li 元素設定事件偵聽器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/339763.html
標籤：javascript 查询