通过jQuery为将来创建的元素添加CSS规则

Question

我有一个不寻常的问题。我已经做了很多次这样的事情：

$('#selector').css('color','#00f');

我的问题是我创建了一个<div id="selector">，然后调用上面的命令，它可以正常工作。

现在，在另一个事件上，稍后，我从DOM中删除该元素，并在以后的时间以相同的ID重新添加它。该元素现在没有color:#00f。

有没有一种方法可以在CSS中添加规则，以使其影响将来使用相同的id/创建的项目class？我喜欢jQuery，但是任何使用纯JavaScript的东西也都可以。

它必须是动态的，而且我不知道要放在CSS文件中的类。另外，我计划在整个应用过程中多次更改单个属性。例如，设置color到black，要blue，要red，和回black。

我得到了 @lucassp 的回答，这就是我的最终结果：

function toggleIcon(elem, classname)
{
    if($(elem).attr('src')=='img/checkbox_checked.gif')
    {
        $(elem).attr('src', 'img/checkbox_unchecked.gif')
        //$('.'+classname).hide();//this was the old line that I removed
        $('html > head').append($('<style>.'+classname+' { display:none; }</style>'));
    }
    else
    {
        $(elem).attr('src', 'img/checkbox_checked.gif')
        //$('.'+classname).show();//this was the old line that I removed
        $('html > head').append($('<style>.'+classname+' { display:block; }</style>'));
    }
}

我还想说 @Nelson 可能是最“正确的”，尽管它需要花费更多的工作才能进入始终可以正常工作的应用程序代码，而这并不是我目前要花费的精力。

如果将来不得不重写（或写类似的东西），我会考虑detach()。

Answer 1

这应该工作：

var style = $('<style>.class { background-color: blue; }</style>');
$('html > head').append(style);