如何僅在元素集合上注冊一次click事件？

Question

如何僅在元素集合上注冊一次click事件？

$(".UFIReplyLink").on("click", function() {
    alert('bound once')
});

單個對象的一些選項已在此處和此處記錄下來 ，但我想在一個集合上進行

我嘗試使用.one沒有運氣

var collectLinks = function() {
  $(".UFIReplyLink").one("click", function() {
    console.log('one...') // this will log however many seconds have passed
  });
}
setInterval(collectLinks, 1000)

Answer 1

.one（） ：將處理程序附加到元素的事件。 每個事件類型的每個元素最多只能執行一次處理程序。

您可以使用one()事件，例如：

$(".UFIReplyLink").one("click", function() {
    alert('bound once')
});

 $(".UFIReplyLink").one("click", function() { alert('bound once') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="UFIReplyLink"> ELEMENT 1 </span> <br> <span class="UFIReplyLink"> ELEMENT 2 </span> <br> <span class="UFIReplyLink"> ELEMENT 3 </span> <br> <span class="UFIReplyLink"> ELEMENT 4 </span> 

Answer 2

如何在單擊按鈕時附加一個類名？ 這樣就可以檢查元素名稱上是否存在類名稱。

 $(".btn").click(function(){ if ($(".my_item").hasClass("clicked")) { console.log("Already clicked me before!"); } else { $(".my_item").addClass("clicked"); $(".my_item").text("Clicked! Try clicking me again..."); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn">Click Me!</button> <button class="btn">Click Me!</button> <button class="btn">Click Me!</button> <div class="my_item">I have never been clicked...</div> 

Answer 3

您可以使用事件委托 ，其中將事件附加到父元素，並指定選擇器以在子元素上執行事件。 如果子元素是動態插入的，它也會執行事件。

請參閱這篇不錯的文章，以了解有關Javascript中解釋的事件委托的信息。

 function addEvent() { $("#main").off("click").delegate("span", "click", function(event) { console.log($(event.target).html()) }); } setInterval(addEvent,1000) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <span class="UFIReplyLink"> ELEMENT 1 </span> <br> <span class="UFIReplyLink"> ELEMENT 2 </span> <br> <span class="UFIReplyLink"> ELEMENT 3 </span> <br> <span class="UFIReplyLink"> ELEMENT 4 </span> </div> 

Answer 4

您可以像這樣使用.unbind $(this).unbind("click"); 阻止點擊事件觸發您單擊的按鈕：

 $(".UFIReplyLink").on("click", function() { alert('bound once'); $(this).unbind("click"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="UFIReplyLink">Button1</button> <button class="UFIReplyLink">Button2</button> <button class="UFIReplyLink">Button3</button>