javascript - 如何将 onclick 添加到具有特定类名的 Div？

Question

我的页面上有一些生成的 div，列出了日历上的事件，它们都具有相同的类“fc-event-inner”。我想向这些 div 添加一个 onclick，但我很难做到这一点。

这是iv尝试的，没有添加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 的委托(delegate)版本

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

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

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

回复评论:

您可以通过事件函数中的 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 来捕获具有公共(public)类的多个项目的事件。