Example of usage of on() method in jQuery_jquery

The example in this article describes the usage of the on() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method can bind one or more event handlers to the matching element.
Use the off() method to delete the event bound by the on() method.

Grammar structure 1:

Copy code The code is as follows:

$(selector).on(events,[selector],[data ],fn)

Parameter list:

Parameters	Description
events	One or more space-separated event types and optional namespaces.
selector	Optional. A selector string that filters the selected elements whose descendant elements will invoke the handler. If the selection is empty or ignored, the event is always fired when it reaches the selected element.
data	Optional. An additional data object passed to the event object as the value of the event.data property for processing by the event handler function.
fn	Function executed when this event is triggered. The false value can also be used as a shorthand for a function that returns false.

Example code:

Example 1:

Copy code The code is as follows:

Original content

The above code binds a click event to the div. When the div is clicked, new text content can be set for the div.

Example 2:

Copy code The code is as follows:

Original content

The above code binds two events to the div. Whether you click the div or move the mouse in the div, new text content will be set for the div.

Example 3:

Copy code The code is as follows:

Original content

The above code uses the data parameter to pass data to the bound event processing function.

Example 4:

Copy code The code is as follows:

 

原来内容

大家好

以上代码通过通过选择器字符串来过滤匹配元素的子元素中哪些可以响应绑定的事件。上面的代码中，类名为children的元素和它的子元素可以调用绑定的事件。
语法结构二:

复制代码 代码如下:

$(selector).on(object,[selector],[data])

Parameter list:

参数	描述
object	一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。
selector	可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。 如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data	可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。

Example code:

Copy code The code is as follows:

Original content

In the above code, the event type and event processing function are bound in the form of objects.

I hope this article will be helpful to everyone’s jQuery programming.