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

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事件函數內。 例如

$(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()方法時附加事件。