Learning jQuery

jQuery's .one() method is a really cool method that, when used, will trigger a function attached to a certain selector or element only once. Normally with jQuery methods, they will occur as many times as the trigger event is triggered, but when you use the .one() method, the code that it's attached to only gets executed once per page load.

As an example, let's say we wanted to use the .one() method to trigger an alert when a button with the class ".alert-button" is clicked, and we only want this to happen ONE time (so if the user clicks the button twice or three times, the alert will only have shown up after the first click. This is actually pretty easy to employ in your jQuery. To see how it works, check out the code below.

$(".alert-button").one("click", function(){
   alert("This alert message will only appear once!");
})

So once that .alert-button button is clicked, the alert will pop up. But if the button is clicked again, no alert message will appear. We've found this method to be extremely useful because often in our projects we do want to limit actions to occurring only once, and it's great to have a simple and effective way to do that.