Explain the difference between .bind() and .on() in jQuery with an example.

Question

Aryan Kumar · Answer

The .bind() and .on() methods in jQuery are used to attach event handlers to elements. However, there are some key differences between the two methods.

.bind() attaches the event handler to the currently selected elements. This means that the event handler will only be triggered when the elements are already present in the DOM.
.on() attaches the event handler to the document. This means that the event handler will be triggered for any elements that are added to the DOM in the future.

Here is an example of how to use .bind() to attach a click event handler to a button:

Code snippet

// Attach a click event handler to the button
$("button").bind("click", function() {
  // Do something when the button is clicked
});

In this example, the event handler will only be triggered when the button is already present in the DOM. If the button is added to the DOM after the .bind() method is called, the event handler will not be triggered.

Here is an example of how to use .on() to attach a click event handler to a button:

Code snippet

// Attach a click event handler to the document
$(document).on("click", "button", function() {
  // Do something when the button is clicked
});

In this example, the event handler will be triggered for any button that is added to the DOM in the future. This is because the .on() method attaches the event handler to the document, not to the button itself.

In general, .on() is the preferred method for attaching event handlers. This is because it allows you to attach event handlers to elements that are added to the DOM in the future. However, .bind() can be useful in some cases, such as when you need to attach an event handler to a specific element that already exists in the DOM.

forum

Explain the difference between .bind() and .on() in jQuery with an example.

Can you answer this question?

1 Answers