jQuery 转换现有元素和动态创建的元素

Question

假设我想转换所有（现有的和动态创建的）具有data-params属性的<a>标签，例如通过设置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); });

还是我错过了一些更简单的方法来做到这一点？

Answer 1

$('a[data-params]')返回具有此数据属性的所有节点。 总是。

我认为问题在于动态添加元素时的 jQuery data方法，因为它不会更新厄运（不添加所需的data-params属性）。

 // Add some elements to the current doc ['magenta', 'olive'].forEach(color => { $(document.createElement('a')) // .data('params', color) <-- this don't updates de dom, 👎 jQuery .attr('data-params', color) .html(color) .appendTo('#root') }) function transform() { $('a').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>

Answer 2

您可以使用 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 元素设置事件侦听器。