jquery - 如何为 css 创建实时事件

Question

如何使此代码生效？

$("#send_button").css({ opacity: 0.2 });

此代码应用于 div 内部的元素document ready。该 div 在事件中被其他 div 替换，然后它再次以动态方式重新插入html()。

这是 div （示例）：

<div id="dinamic_div"><img src="image.jpg" id="send_button"></div>

Answer 1

创建一个 CSS 规则，它将应用于任何匹配选择器的对象，即使它是动态创建的。

#send_button {opacity: 0.2;}

或者，在类名上使用不透明度创建 CSS 规则，并将类名放在按钮上：

.lightButton {opacity: 0.2;}

<div id="dinamic_div">
    <img src="image.jpg" class="lightButton" id="send_button">
</div>

---

如果你必须用 javascript 来做，那么你最简单的方法就是在创建动态对象时设置它的样式。

如果你不能这样做，你可以用 javascript 创建一个 CSS 规则。

工作示例：

var html = '<div id="dinamic_div"><img src="http://dummyimage.com/200x100/000/fff&text=Hello" id="send_button"></div>';

$(html).appendTo(document.body);

var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = "#send_button {opacity: 0.2;}";
document.getElementsByTagName("head")[0].appendChild(style);

工作演示：http: //jsfiddle.net/jfriend00/Cnbvg/