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

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

$.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();
}); 

---

您可以在每次修改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");

---

您需要为这些元素指定一个类，通过该类，这些元素将自动具有此样式

(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");

---

---

你不能在CSS中完成全部工作吗？您不需要JS。

$（'.elem'）.border（）仅在DOM就绪时触发一次…您不能在添加元素后调用它吗？@RRR-正确。OP已经知道了这一点，因此问题是如何应对未来因素…@nnnnnn-你不认为如果我能做到的话，我会这么做吗？这只是一个简单的例子。我真正的任务是根据图像是人像还是景观为图像指定一些样式。难道你不能在CSS中完成全部工作吗？您不需要JS。
$（'.elem'）.border（）仅在DOM就绪时触发一次…您不能在添加元素后调用它吗？@RRR-正确。OP已经知道了这一点，因此问题是如何应对未来因素…@nnnnnn-你不认为如果我能做到的话，我会这么做吗？这只是一个简单的例子。我真正的任务是根据肖像画或风景画为图像指定某种风格，这就是问题所在。。。我不能通过css来做。这只是一个简单的例子。我应该只在js中这样做，因为我不能向元素添加或删除类。所以我不知道元素有什么类。@user2707590它只是一个js解决方案。您也可以通过js添加样式。我需要为添加到dom的未来元素添加样式。@user2707590由于未来元素已经有了类名，此样式将应用于它们“我不知道元素有什么类”-那么您如何区分该元素与可能添加的其他元素？这就是问题所在。。。我不能通过css来做。这只是一个简单的例子。我应该只在js中这样做，因为我不能向元素添加或删除类。所以我不知道元素有什么类。@user2707590它只是一个js解决方案。您也可以通过js添加样式。我需要为添加到dom的未来元素添加样式。@user2707590由于未来元素已经有了类名，此样式将应用于它们“我不知道元素有什么类”-那么您如何区分该元素与可能添加的其他元素？这是一个有效的解决方案，但是所有浏览器都支持它吗？对于IE，您可以使用intead of DomSubtree修改propertychange事件；对于现代浏览器，您可以使用MutationObserver，这是一个有效的解决方案，但是所有浏览器都支持它吗？对于IE，您可以使用intead of DomSubtree修改propertychange事件；对于现代浏览器，您可以使用MutationObserver