Question

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

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

我添加到我的文档准备好了：

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

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

类似于此点击事件：

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

Answer 1

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

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

Answer 2

您需要为这些元素指定一个类，通过这些元素，它们将自动拥有此样式。

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

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

2 个答案: