如何创建一个可以处理未来元素的函数

How to create a function which can work on future elements?

本文关键字：未来 处理 元素 函数 何创建 创建 一个      更新时间：2023-09-26

假设我有一个为元素添加边框的函数：

$.fn.border = function() {
    $(this).css('border', '1px solid red');
}

我已准备好添加到我的文档中：

$(document).ready(function() {
    $('.elem').border();
});

这将正常工作，但是现在如果我需要通过 ajax 将其他元素添加到 dom，它们将不会获得边框。有没有办法将其委托给未来的元素？

与此点击事件类似：

$('div').on('click', 'a', function() {
    // do something
})

您可以在每次 DOM 修改后运行代码并创建边框

$(document).on("DOMSubtreeModified", function() {
   $('.elem').border();
});

您需要为这些元素分配一个类，通过该类，它们将自动具有此样式。

(function createBorderClass()
{
   var style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = '.elem{ border: 1px solid red; }'; 
   document.getElementsByTagName('head')[0].appendChild(style);
})();

现在，您只需要确保从 AJAX 响应创建的元素具有此类。

你可以通过做

(function createBorderClass(selector, prop, value)
{
   var style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = selector+ '{ ' + prop + ': ' + value + ' }'; 
   document.getElementsByTagName('head')[0].appendChild(style);
})(".elem", "border", "1px solid red");
相关文章：