Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,032

HOME > Client Script Forum > ถาม javascript เรื่องการผูก event กับ dynamic form input



 

ถาม javascript เรื่องการผูก event กับ dynamic form input

 



Topic : 136116



โพสกระทู้ ( 335 )
บทความ ( 0 )



สถานะออฟไลน์




เนื่องจากผมทำ Form กรอกข้อมูล ในสามารถ dynamic ในการเพิ่ม หรือ ลบ แถวได้
ตัวอย่าง
ตัวอย่าง dynamic form

ผมใช้ javascript กับ jquey ในการช่วย clone <tr> ในการทำ event add แถวในตารางเพิ่ม

แต่ input ในแต่ละแถว มีการเรียกใช้งานพวก library อื่นๆ เช่น datepicker หรือมีการใช้งาน event on click หรือ change บน input แต่ละตัว
input ที่ถูกสร้างขึ้นมาใหม่ จะไม่สามารถใช้งาน event ดังกล่าวได้
พอจะมีวิธีแก้การไขปัญหาไหมครับ



Tag : JavaScript, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2021-05-17 12:05:12 By : Likito View : 831 Reply : 6
 

 

No. 1



โพสกระทู้ ( 9,567 )
บทความ ( 2 )



สถานะออฟไลน์


การ binding function ไปยัง object มีอยู่2 วิธี
1 อัตตโนมัตใช้ การ delegate
2 แมนน่วน สั่งเอง

แนะนำได้แค่นี้แหล่ะ ส่วนตัวอย่าง ก็ลองเปิด google หาเอา

ถ้าอยากจะได้คำแนะนำเพิ่มก็เอา โค๊ดมาลง






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-05-17 14:26:01 By : Chaidhanan
 


 
จุดสำมะคัน คือ ใส่ class หรือ generate id ให้กับ element ใหม่ด้วย
เพราะถ้า id ซ้ำ หรือไม่มี การ bind ก็จะใช้ได้เฉพาะกับต้นฉบับหรืออาจไม่ได้เลย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-05-17 15:37:36 By : พญามัจจุราช
 

 

No. 3



โพสกระทู้ ( 335 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2021-05-17 14:26:01
รายละเอียดของการตอบ ::
code คร่าวๆ ประมาณนี้ครับ



Code (JavaScript)
$(document).ready(function() {

    $("input[type='number']").inputNumericTextBox();
   
   $('.percentage').on('change', function() {
       // do something ...............
   });


   $("#btn-add").click(function() {
        $('tr:last').clone().insertAfter($(this).parents('table').find('tbody tr:last'))
   });

});



ผมมีการกำหนด ใช้ inputNumericTextBox ให้กับ input type=number ทุกตัวใน form นั้น
และมีการ binding event on change ให้กับ class percentage ไว้แล้ว

เมื่อ event #btn-add click ให้ทำการ clone <tr> อันสุดท้าย มา insert หลังจาก <tr></tr> อันสุดท้าย
เพื่อเป็นการ เพิ่มแถว ใน ตาราง

แต่ปรากฏว่า input type=number ที่ถูก clone ขึ้นมาใหม่ ไม่สามารถใช้งาน .inputNumericTextBox(); ที่ถูก blind ไว้ก่อนแล้วครับ
รวมถึง .percentage on change ก็ใช้งานไม่ได้ครับ


ิวิธีแก้ของผมคือตอนนี้ ใน event btn-add click ผมทำการ binding ทั้งสอง event ให้กับ element ที่ถูก clone ขึ้นมาใหม่ "อีกครั้งหนึ่ง"

คำถามคือ ผมอยาก binding ไว้ครั้งเดียว ครั้งแรกสุด
ถ้า element ที่ถูก clone ขึ้นมาในครั้งต่อๆ ไปไม่ต้อง binding ใหม่ได้ ไหม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-05-18 10:10:13 By : Likito
 


 

No. 4



โพสกระทู้ ( 9,567 )
บทความ ( 2 )



สถานะออฟไลน์


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 อัตตโนมัติ ครั้งเดียว
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-05-18 13:17:31 By : Chaidhanan
 


 

No. 5



โพสกระทู้ ( 9,567 )
บทความ ( 2 )



สถานะออฟไลน์


เพิ่มเติม
$('.percentage').on('change', function() {

คำสั่งนี้ มันไม่ทำทุกครั้งที่ สร้างคลาส '.percentage' แต่มัน binding เฉพาะ คลาสที่มีอยู่แล้ว

ที่ถูกต้องเขียนแบบนี้
$(document).on('change', '.percentage', function() {

ตัวแม document เป็นตัวหลัก เมื่อมีการเพิ่มเติม class ในตัวแม่ จะดำเนินการ binding ตามที่กำหนด
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-05-18 13:27:12 By : Chaidhanan
 


 

No. 6



โพสกระทู้ ( 335 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-05-18 23:26:13 By : Likito
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ถาม javascript เรื่องการผูก event กับ dynamic form input
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่