Detailed explanation of jQuery.clone() function example

The

clone() function is used to clone a copy of the current matching element collection and returns it in the form of a jQuery object. You can also simply understand it as: clone the current jQuery object.

You can also specify whether to copy additional data (data() function) of these matching elements (even their child elements) and bind events.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.clone( withDataAndEvents [, deepWithDataAndEvents ] )

Parameters

Parameter Description

withDataAndEvents Optional/Boolean type Whether to copy the element's additional data and binding events at the same time, the default is false.

deepWithDataAndEvents Optional/Boolean type Whether to copy the additional data and binding events of all sub-elements of the element at the same time, the default value is the value of the parameter withDataAndEvents.

clone() is mainly used to clone a copy of the current jQuery object.

jQuery 1.5 New support: clone() supports the second parameter deepWithDataAndEvents. This parameter indicates whether to copy additional data and binding events for all child elements of the cloned element at the same time.

Note:

1. Before jQuery 1.4, the clone() function only additionally copied the binding event of the element. Starting from version 1.4, it began to support copying additional data of the element.

2. In version 1.5.0 (only 1.5.0), the default value of the parameter withDataAndEvents was incorrectly set to true. Starting from 1.5.1, its default value was changed back to false.

Return value

clone()The return value of the function is of jQuery type and returns a clone copy of the current jQuery object.

Note: For performance reasons, the clone() function will not copy the dynamics of some form elements, such as the content entered by the user in and the options selected by the user in <select>. However, the dynamics of the <input> element will be copied, such as the content entered by the user in the text and the user's selected <a href="http://www.php.cn/code/8243.html" target="_blank">state</a> of the checkbox. </select>

Example & Description

The clone() function is used to clone the current jQuery object. Please refer to the following HTML code as an example:

<p id="n1">
    <input id="n2" type="button" value="按钮1" />
    <input id="n3" type="button" value="按钮2" />
</p>

The following jQuery sample code is used to demonstrate the specific usage of the clone() function:

// Current jQuery version: 1.11.1

$(":button").click( function(){

document.writeln( this.value );

} );

var $n2 = $("#n2");

$n2.data("myData", "Additional data");

//There is no cloning of additional data and binding Fixed event

var $clonedN2 = $n2.clone(); // Both parameters default to false

document.writeln( $clonedN2.data("myData") ); / / undefined

$clonedN2.trigger("click"); // (No bound click event, no response output)

//Clone additional data and binding events at the same time

var $clonedN2WithCopy = $n2.clone( true ); // Two parameters: true, true (the second parameter is not set, the default is the value of the first parameter)

document. writeln( $clonedN2WithCopy.data("myData") ); // Additional data

$clonedN2WithCopy.trigger("click"); // Button 1

The above is the detailed content of Detailed explanation of jQuery.clone() function example. For more information, please follow other related articles on the PHP Chinese website!