jQuery — Wrapping, Visibility, and Delegation

Photo by Alexander Mils on Unsplash

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.triggerHandler()

The .triggerHandler() method lets us run all handlers attached to an event for an element.

For example, if we have:

<button id="new">.triggerHandler( "focus" )</button><br><br>
<input type="text" value="To Be Focused">

Then we can trigger the focus event when we click on the button by writing:

$("#new").click(function() {
  $("input").triggerHandler("focus");
});
$("input").focus(function() {
  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

We show the Focused! text when we click on the button as the input is focused.

.unbind()

The .unbind() method removes a previous attached event handler from the elements.

For example, if we have:

<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div id="theone"></div>

Then we can bind and unbind the click handler for the div with id theone by writing: