|
![](/images/resource/spacer.gif) |
|
ถาม javascript เรื่องการผูก event กับ dynamic form input |
|
![](/images/resource/viewboard_01.gif?v=1001) |
|
|
![](/images/resource/viewboard_03.gif?v=1001) |
![](/images/resource/viewboard_04.gif?v=1001) |
|
การ binding function ไปยัง object มีอยู่2 วิธี
1 อัตตโนมัตใช้ การ delegate
2 แมนน่วน สั่งเอง
แนะนำได้แค่นี้แหล่ะ ส่วนตัวอย่าง ก็ลองเปิด google หาเอา
ถ้าอยากจะได้คำแนะนำเพิ่มก็เอา โค๊ดมาลง
|
![](/images/resource/blockviewtopic_01.gif?v=1001) |
![](/images/resource/blockviewtopic_02.gif?v=1001) |
![](/images/resource/blockviewtopic_03.gif?v=1001) |
![](/images/resource/blockviewtopic_04.gif?v=1001) |
Date :
2021-05-17 14:26:01 |
By :
Chaidhanan |
|
![](/images/resource/blockviewtopic_06.gif?v=1001) |
![](/images/resource/blockviewtopic_07.gif?v=1001) |
![](/images/resource/blockviewtopic_08.gif?v=1001) |
![](/images/resource/blockviewtopic_09.gif?v=1001) |
|
|
![](/images/resource/viewboard_06.gif?v=1001) |
![](/images/resource/viewboard_07.gif?v=1001) |
|
![](/images/resource/viewboard_08.jpg?v=1001) |
![](/images/resource/viewboard_09.gif?v=1001) |
![](/images/resource/viewboard_01.gif?v=1001) |
|
|
![](/images/resource/viewboard_03.gif?v=1001) |
![](/images/resource/viewboard_04.gif?v=1001) |
|
จุดสำมะคัน คือ ใส่ class หรือ generate id ให้กับ element ใหม่ด้วย
เพราะถ้า id ซ้ำ หรือไม่มี การ bind ก็จะใช้ได้เฉพาะกับต้นฉบับหรืออาจไม่ได้เลย
|
![](/images/resource/blockviewtopic_01.gif?v=1001) |
![](/images/resource/blockviewtopic_02.gif?v=1001) |
![](/images/resource/blockviewtopic_03.gif?v=1001) |
![](/images/resource/blockviewtopic_04.gif?v=1001) |
Date :
2021-05-17 15:37:36 |
By :
พญามัจจุราช |
|
![](/images/resource/blockviewtopic_06.gif?v=1001) |
![](/images/resource/blockviewtopic_07.gif?v=1001) |
![](/images/resource/blockviewtopic_08.gif?v=1001) |
![](/images/resource/blockviewtopic_09.gif?v=1001) |
|
|
![](/images/resource/viewboard_06.gif?v=1001) |
![](/images/resource/viewboard_07.gif?v=1001) |
|
![](/images/resource/viewboard_08.jpg?v=1001) |
![](/images/resource/viewboard_09.gif?v=1001) |
![](/images/resource/viewboard_01.gif?v=1001) |
|
|
![](/images/resource/viewboard_03.gif?v=1001) |
![](/images/resource/viewboard_04.gif?v=1001) |
|
Code (PHP)
<table>
<tr data-id="1" class="tr_input"><td>....</td><td>....</td></tr>
<tr data-id="2" class="tr_input"><td>....</td><td>....</td></tr>
<tr data-id="3" class="tr_input"><td>....</td><td>....</td></tr>
</table>
<script>
$(document).delegate('.tr_input td','click', function(){
var tr = $(this).parent();
alert( $(tr).data('id');
});
ตัวอย่างสำหรับทุกครั้งที่เราคลิกใน tag td
สามารถ แปลงเป็น input หรือ object อะไรก็ได้
เป็นการสั่ง binding อัตตโนมัติ ครั้งเดียว
|
![](/images/resource/blockviewtopic_01.gif?v=1001) |
![](/images/resource/blockviewtopic_02.gif?v=1001) |
![](/images/resource/blockviewtopic_03.gif?v=1001) |
![](/images/resource/blockviewtopic_04.gif?v=1001) |
Date :
2021-05-18 13:17:31 |
By :
Chaidhanan |
|
![](/images/resource/blockviewtopic_06.gif?v=1001) |
![](/images/resource/blockviewtopic_07.gif?v=1001) |
![](/images/resource/blockviewtopic_08.gif?v=1001) |
![](/images/resource/blockviewtopic_09.gif?v=1001) |
|
|
![](/images/resource/viewboard_06.gif?v=1001) |
![](/images/resource/viewboard_07.gif?v=1001) |
|
![](/images/resource/viewboard_08.jpg?v=1001) |
![](/images/resource/viewboard_09.gif?v=1001) |
![](/images/resource/viewboard_01.gif?v=1001) |
|
|
![](/images/resource/viewboard_03.gif?v=1001) |
![](/images/resource/viewboard_04.gif?v=1001) |
|
เพิ่มเติม
$('.percentage').on('change', function() {
คำสั่งนี้ มันไม่ทำทุกครั้งที่ สร้างคลาส '.percentage' แต่มัน binding เฉพาะ คลาสที่มีอยู่แล้ว
ที่ถูกต้องเขียนแบบนี้
$(document).on('change', '.percentage', function() {
ตัวแม document เป็นตัวหลัก เมื่อมีการเพิ่มเติม class ในตัวแม่ จะดำเนินการ binding ตามที่กำหนด
|
![](/images/resource/blockviewtopic_01.gif?v=1001) |
![](/images/resource/blockviewtopic_02.gif?v=1001) |
![](/images/resource/blockviewtopic_03.gif?v=1001) |
![](/images/resource/blockviewtopic_04.gif?v=1001) |
Date :
2021-05-18 13:27:12 |
By :
Chaidhanan |
|
![](/images/resource/blockviewtopic_06.gif?v=1001) |
![](/images/resource/blockviewtopic_07.gif?v=1001) |
![](/images/resource/blockviewtopic_08.gif?v=1001) |
![](/images/resource/blockviewtopic_09.gif?v=1001) |
|
|
![](/images/resource/viewboard_06.gif?v=1001) |
![](/images/resource/viewboard_07.gif?v=1001) |
|
![](/images/resource/viewboard_08.jpg?v=1001) |
![](/images/resource/viewboard_09.gif?v=1001) |
![](/images/resource/viewboard_01.gif?v=1001) |
|
|
![](/images/resource/viewboard_03.gif?v=1001) |
![](/images/resource/viewboard_04.gif?v=1001) |
|
ขอบคุณครับ
|
![](/images/resource/blockviewtopic_01.gif?v=1001) |
![](/images/resource/blockviewtopic_02.gif?v=1001) |
![](/images/resource/blockviewtopic_03.gif?v=1001) |
![](/images/resource/blockviewtopic_04.gif?v=1001) |
Date :
2021-05-18 23:26:13 |
By :
Likito |
|
![](/images/resource/blockviewtopic_06.gif?v=1001) |
![](/images/resource/blockviewtopic_07.gif?v=1001) |
![](/images/resource/blockviewtopic_08.gif?v=1001) |
![](/images/resource/blockviewtopic_09.gif?v=1001) |
|
|
![](/images/resource/viewboard_06.gif?v=1001) |
![](/images/resource/viewboard_07.gif?v=1001) |
|
![](/images/resource/viewboard_08.jpg?v=1001) |
![](/images/resource/viewboard_09.gif?v=1001) |
|
|
|
![](/images/digitalocean-banner.jpg)
|
Load balance : Server 04
|