jQuery တွင် အပ်ဒဲ့ဂိတ်လုပ်ခြင်း

သင်သည် JavaScript ကို လေ့လာဖူးပါက၊ အသစ်ထည့်သွင်းလိုက်သော အစိတ်အပိုင်းများအတွက် ဖြစ်ရပ်များချိတ်ဆက်ရာတွင် ဖြစ်ပေါ်လာနိုင်သော ပြဿနာများမှ လွတ်မြောက်စေနိုင်သည့် ဖြစ်ရပ်များ အပ်ဒဲ့ဂိတ်လုပ်ခြင်း ခေါင်းစဉ်နှင့် ကြုံတွေ့ဖူးပြီးဖြစ်မည်။ jQuery အတွက် ၎င်းသည် မည်သို့ပုံစံရှိမည်ကို ကြည့်ကြပါစို့။

အောက်ပါ HTML ကုဒ်ကို ယူကြည့်ပါမည်။

<ul>
	<li>စာသား</li>
	<li>စာသား</li>
	<li>စာသား</li>
</ul>

၎င်းအတွက် CSS သည် အောက်ပါအတိုင်းဖြစ်သည်။

li {
	width: 100px;
	cursor: pointer;
}

ယခု၊ ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့လုပ်ခဲ့သကဲ့သို့ စာရင်းအမှတ် li အတွက် click မက်သဒ်ကို ချိတ်ဆက်မည့်အစား၊ on မက်သဒ်ကို အသုံးပြု၍ စာရင်း ul ကိုယ်တိုင်အတွက် ချိတ်ဆက်ပါမည်။ ထို့အပြင် သားသမီးများ၏ ဆီလက်တာ အဖြစ် ဒုတိယမြောက် (မဖြစ်မနေ မလိုအပ်သော) ပါရာမီတာ 'li' ကို ပေးပို့ပါမည်။ ဘာရလဒ်ထွက်လာမည်ကို ကြည့်ကြပါစို့။

$('ul').on('click', 'li', function() {
	$(this).append('!');
});

ul တစ်ခုကို ပေးထားသည်၊ ၎င်းထဲတွင် li အများအပြားရှိသည်။ ul အောက်တွင် ခလုတ်တစ်ခုပြုလုပ်ပါ၊ ၎င်းကို နှိပ်လိုက်သည့်အခါ ul ၏ အဆုံးတွင် 'အမှတ်' စာသားပါသည့် li အသစ်တစ်ခု ထပ်ထည့်ပေးပါမည်။ ပြီးလျှင် တစ်ခုချင်းစီသော li ကို ကလစ်နှိပ်လိုက်တိုင်း ၎င်း၏အဆုံးတွင် '!' ထပ်ထည့်ပေးပါမည်။ ၎င်းသည် အသစ်ထပ်ထည့်လိုက်သည့် li များအတွက်လည်း အလုပ်လုပ်ရမည်။ ဤပြဿနာကို အပ်ဒဲ့ဂိတ်လုပ်ခြင်းဖြင့် ဖြေရှင်းပါ (ဆိုလိုသည်မှာ ဖြစ်ရပ်ကို ul ပေါ်တွင် ချိတ်ဆက်ထားရမည်)။

အမည်နှင့် သူမျိုးနာမည် ကော်လံနှစ်ခုပါသည့် သုံးစွဲသူများဇယားတစ်ခုကို ပေးထားသည်။ ဇယားအောက်တွင် ဖောင်တစ်ခုပြုလုပ်ပါ၊ ၎င်းကို အသုံးပြု၍ ဇယားထဲသို့ သုံးစွဲသူအသစ်တစ်ဦးကို ထပ်ထည့်နိုင်မည်။ မည်သည့်ဆဲလ်ကိုမဆို ကလစ်နှိပ်လိုက်သည့်အခါ ၎င်းဆဲလ်၏စာသားကို ပြောင်းလဲနိုင်မည့် prompt တစ်ခု ပေါ်လာစေပါ။ ဤပြဿနာကို အပ်ဒဲ့ဂိတ်လုပ်ခြင်းဖြင့် ဖြေရှင်းပါ (ဆိုလိုသည်မှာ ဖြစ်ရပ်ကို table ပေါ်တွင် ချိတ်ဆက်ထားရမည်)။