clone(copyHandlers)

copyHandlers : (true|false) เป็นเครื่องหมายบอกว่า ให้โคลน event ไปด้วยหรือไม่ ถ้าเป็น true ก็จะโคลนนิ่ง event ไปด้วย ถ้าเป็น false จะโคลนเฉพาะอีลิเม้นท์ ไม่โคลน event ของอีลิเม้นท์ไป
return : selector

คำสั่งนี้ใช้สำหรับโคลนนิ่งอีลิเม้นท์พร้อมกับสิ่งที่อยู่ภายในอีลิเม้นท์นั้นทั้งหมด คำสั่งนี้ถ้าใช้มันเดี่ยวๆจะไม่เกิดอะไรขึ้นเลย มันแค่โคลนเก็บไว้ในหน่วยความจำเท่านั้น หรือถ้าท่านใช้ตัวแปรเข้าไปรับค่า มันก็เก็บไว้ในตัวแปรเท่านั้น ดูนี่

$('p').clone(false);
var tag_p = $('p').clone(false);

2 คำสั่งด้านบนไม่เกิดผลอะไรขึ้นมาบนเพจเลย ท่านจะต้องนำสิ่งที่ได้จากคำสั่งนี้ไปทำอย่างอื่นต่อ เช่น โคลนนิ่งมาแล้วให้เพิ่มเข้าไปในฟอร์ม เป็นต้น

ตัวอย่างการใช้งาน

Live Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery clone command</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$('#clone').click(function(){
 
		var textbox = $('input[name=item[]]').clone( false );
		textbox.appendTo( $('#form1') );
 
	});
 
})
</script>
</head>
<body>
<p>
  <input type="submit" name="clone" id="clone" value="clone" />
</p>
<form id="form1" name="form1" method="post" action="">
  <input type="text" name="item[]" id="item[]" />
</form>
<p>&nbsp;</p>
</body>
</html>

เมื่อท่านกดปุ่ม clone ครั้งที่ 1 ในฟอร์มจะเพิ่มเท็กบ้อกมาอีก 1 ตัว พอคลิกครั้งที่ 2 มันจะเพิ่มทีเดียว 2 ตัว พอคลิกครั้งที่ 3 เพิ่มจึกเดียว 4 ตัวเลย

ที่เป็นเช่นนี้ก็เพราะว่า

$('input[name=item[]]')

selector ตัวนี้อ้างอิงถึง แท็ก input ที่มีชื่อว่า item[] ซึ่งครั้งแรก บนเพจมันก็มีแค่ัตัวเดียว แต่พอเราคลิกปุ่ม clone ครั้งที 2 selector ที่อ้างอิงถึงมันมี 2 ตัวแล้ว มันก็เพิ่มเข้าไปทีเดียว 2 ตัว ท่านก็ลองเอาไปประยุกต์เอาไปต่อยอดดู ผมแสดงแค่การทำงานของคำสั่งว่ามันทำงานยังไง

jQuery jQuery tutorial Live Demo
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ