Question

我的页面上有一些生成的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>

Answer 1

使用委托版on

$(document).on("click", ".fc-event-inner", function(){
   /// do your stuff here
});

这会捕获文档级别的点击，然后应用类过滤器以查看单击的项目是否相关。

示例JSFiddle：http://jsfiddle.net/BkRJ2/

回答评论：

您可以通过事件功能中的this访问点击的元素。 e.g。

$(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以捕获具有公共类的多个项目上的事件。

Answer 2

您不需要each()将事件绑定到具有特定类的元素，只需选择器即可。使用jQuery on()和事件委托它将事件绑定到绑定代码后生成的事件。

$(document).on("click", ".fc-event-inner", function(){
     alert("click");
});

委派活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序jQuery doc。

Answer 3

<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>

http://jsfiddle.net/UBhk9/

一些解释：

因为你正在使用一个类（它可以多次使用，与id相反），它将适用于具有此类名的所有元素。 .on方法将事件处理程序（在此示例中为“click”）附加到选择器（类.fc-event-inner）。如果要删除事件边界，则必须使用.off()方法，如果只想在使用.one()方法后附加事件。

如何使用特定的类名向Div添加onclick？

3 个答案:

示例JSFiddle：http://jsfiddle.net/BkRJ2/

回答评论：