[英]How to add onclick to Div with a specific class name?
我的页面上有一些生成的div列出了日历上的事件,它们都有相同的类“fc-event-inner”。 我想为这些div添加一个onclick,但我正在努力做到这一点。
这是我试过的,没有添加onclick,页面上没有错误。
$(document).ready(function () {
$('.fc-event-inner').each(
function (element) {
Event.observe("click", element, EventClick);
}
);
function EventClick() {
alert("You clicked an event")
}
});
这是生成的事件div的示例:
<div class="fc-event-inner">
<span class="fc-event-title">Requested<br>by Santa</span>
</div>
使用on
的委托版本
$(document).on("click", ".fc-event-inner", function(){
/// do your stuff here
});
这将捕获文档级别的单击,然后应用类筛选器以查看单击的项是否相关。
您可以通过访问点击的元素this
事件函数内。 例如
$(document).on("click", ".fc-event-inner", function(){
var id = this.id; // Get the DOM element id (if it has one)
var $this = $(this); // Convert DOM element into a jQuery object to do cool stuff
$this.css({'background-color': 'red'}); // e.g. Turn clicked element red
});
*注意:您永远不必运行Each
以便捕获具有公共类的多个项目上的事件。
你不需要each()
将事件绑定到具有特定类的元素,只需选择器就足够了。 在事件委托上使用jQuery on()它会将事件绑定到绑定代码之后生成的事件。
$(document).on("click", ".fc-event-inner", function(){
alert("click");
});
委托活动
委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件。 通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序jQuery doc的需要 。
<div class="fc-event-inner">
<span class="fc-event-title">Requested<br />by Santa</span>
</div>
你的JS:
<script>
$(document).ready(function () {
$('.fc-event-inner').on("click", EventClick);
function EventClick() {
alert("You clicked an event")
}
});
</script>
一些解释:
因为您正在使用一个类(它可以多次使用,与id相反),它将适用于具有此类名的所有元素。 .on
方法将事件处理程序(在此示例中为“click”)附加到选择器(类.fc-event-inner
)。 如果要删除事件边界,则必须使用.off()
方法,如果只想在使用.one()
方法时附加事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.