.live() - Events , jQuery |
.live() เป็นการใช้ jQuery Event กับ .live() แนบตัวจัดการกับเหตุการณ์ event สำหรับองค์ประกอบทั้งหมดซึ่งตรงกับตัวเลือกในปัจจุบันในขณะนี้และในอนาคต
Syntax
.live( eventType, handler )
.live( eventType, eventData, handler )
.live( events )
Example 1 ตัวอย่างการใช้งาน Event ของ jQuery .live()
Eventslive1.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
});
</script>
</head>
<body>
<p>Click me!</p>
<span></span>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Event กับ .live() ในการจัดการกับ element ที่อ้างถึง
Example 2 ตัวอย่างการใช้งาน Event ของ jQuery .live()
Eventslive2.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
p { color:red; }
span { color:blue; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").live("myCustomEvent", function(e, myName, myValue) {
$(this).text("Hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
});
</script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Event กับ .live() ในการจัดการกับ element ที่อ้างถึง
Example 3 ตัวอย่างการใช้งาน Event ของ jQuery .live()
Eventslive3.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").live({
click: function() {
$(this).after("<p>Another paragraph!</p>");
},
mouseover: function() {
$(this).addClass("over");
},
mouseout: function() {
$(this).removeClass("over");
}
});
});
</script>
</head>
<body>
<p>Click me!</p>
<span></span>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Event กับ .live() ในการจัดการกับ element ที่อ้างถึง
ลิ้งค์ที่ควรศึกษา
Go to : jQuery Selectors : jQuery Selectors and Element
Go to : jQuery Events : jQuery and Events
เกี่ยวกับบทความ
ส่วนหนึ่งของบทความได้เรียบเรียงและแปลจากเว็บไซต์ jQuery.Com โค้ดตัวอย่างคำสั่งนี้อยู่ภายใต้สัญญาอนุญาตของ GFDL สามารถนำโค้ดและคำสั่งใช้งานได้ฟรี สงวนลิขสิทธิ์เฉพาะคำอธิบายภาษาไทย
|
 ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
| |
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
| |
Score Rating : |
 |
|
| |
Create/Update Date : |
2011-09-22 21:34:28 /
2017-03-19 14:01:28 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
Load balance : Server 00
