To click incident as an example:
Common binding events: $ ( 'btn1.') Click (function () {} binding.
on binding events: $ (document) .on ( 'click', 'btn2.', function () {} Binding
So what difference does it both ways?
First we look at differences in practice:
①click events are all elements of class named btn1 after the page loads, access, and then click bind this event, if you then generate a btn1 element by other operations, it did not click this event;
② and on () event played a listening effect can be achieved dynamic binding html element, such as a start only one element btn2 you in some way but also added a btn2 element, which you can click, you can add unlimited btn2 .
So how to achieve this dynamic listening process it?
on () event is equivalent to $ (document) .click (function () {if (clicked btn) {}}), to document adds a click event, party clicked btn, event bubbling principle, from the inside to the outside, the equivalent of clicking a document, it will perform the following operations, in essence, only to the document adds an event, click () event is for all btn add a click event.
Also on () event can add multiple events.
on () event delegate advantage: the original event binding to bind a lot of events, and now only need to bind an event that greatly improves the efficiency and performance of a page, add dynamic elements to solve the cause of the bug can not be triggered.
Jq1.7 + began to support.