Ob'ektlarga JavaScript-ni ishlov berishni to'sib qo'yish

Mening HTML kodimdagi ba'zi narsalarga xatti-harakatlarni ko'rsatadigan skript bor. Aytaylik, unda yozilgan belgilar sonini yangilaydigan with-counter sinfiga ega bo'lgan matn maydoni; mouseover bo'lganda, tinglaydigan ro'yxat; birlashtirilib bog'langan; va hokazo.

masalan:

$("textarea.with-counter").keydown(function(){
   var text_len = $(this).val().length;
   //manipulate the span/etc that has the counter
});
$("a.ajax_link").click(function(){
   var loc = $(this).attr("href");
   //load the value of href via $.ajax to some div
   //yadda yadda
});

Dastlabki stsenariysi: ma'lumotlar bazasidan nisbatan kam miqdorda HTML-fayllar yuklanadi va keyin unga amallar qo'shiladi (yuqoridagi kod qismini qo'llash). Hozir menda bir xil formatdagi HTMLning boshqa bir qismini yuklaydigan bu buyruq mavjud. Yangi yuklangan HTML xuddi shu harakatlarga ega bo'lishi kerak.

Muammoning eng pastki satri quyidagicha: Men bu harakatlarni ilgari ushbu amallarni qo'shgan ob'ektlar/elementlarga biriktirishni xohlamayman. HTML'larning yangi to'plami yuklanganligi sababli, ushbu amallarni amalga oshirish qanchalik tez amalga oshirilsa. Amallar oldin yuklangan HTMLga (ular bu harakatlarga ega ekanligini unutmang), men nima qilishni istasam, harakatlar yangi yuklangan HTML qismlariga faqat biriktirilgan bo'lishi kerak. FF muzlatilgan va buyruq fayli jarayonini davom ettirishni xohlaymanmi deb so'raydi.

Ergo, savol: Amallarni ilgari qo'yilgan xatti-harakatlar bilan bog'lashni istamaydigan usul bormi?

* Bir millionga rahmat.

1

2 javoblar

Ha, kontekstda olib boriladigan funktsiyaga - harakat qiluvchi majburiy kodni tekshiradigan selektor yoki elementni qayta tuzing. Keyinchalik, jQuery $ funktsiyasiga ikkinchi parametr sifatida kontekstdan o'tish uchun barcha tanlovchilaringizni o'zgartiring.

Keyinchalik, bu funktsiyani ma'lum bir yangi konteyner elementi uchun chaqirishingiz mumkin.

Masalan,

function bindActions(context) {
    context = context || $('body');//use whole page if no context specified
$("textarea.with-counter", context).keydown(function(){
   var text_len = $(this).val().length;
   //manipulate the span/etc that has the counter
});
$("a.ajax_link", context).click(function(){
   var loc = $(this).attr("href");
   //load the value of href via $.ajax to some div
   //yadda yadda
});
}

// add new content to a div with id of "new3", for example, then:
bindActions('#new3');
1
qo'shib qo'ydi
O'ylaymanki, bu men uchun qidirmoqdaman. :)
qo'shib qo'ydi muallif threepoint1416, manba

Simply use live events, e.g. $(...).live('eventname', function() { ... })

Ular elementlarning o'zi emas, balki hujjat, shunga o'xshash voqea tufayli barcha mos keladigan voqealar uchun ishlaydi, shu jumladan .live() chaqiruv vaqtida mavjud bo'lmagan narsalar.

0
qo'shib qo'ydi
Ishlash yaxshi bo'lishi kerak. Hujjatning yuqori qismidagi tadbirlar baribir shunga o'xshashki, faqat haqiqiy farq shundaki, bu voqea allaqachon shitirlangan (bu ishlov berildi), chunki preventDefault() yoki stopPropagation() hujjatning ildiziga etib kelganida). jonli hodisalar o'rniga delegate() dan foydalanishingiz mumkin. Bu holda siz foydalanmoqchi bo'lgan ildiz elementini belgilashingiz mumkin.
qo'shib qo'ydi muallif ThiefMaster, manba
Jonli tadbirlarning ishlashi men aytib o'tgan kontekst-yondashuvdan, ayniqsa, katta sahifalar uchun qanday shakllanayotganiga qiziqaman. jsperf.com tekshiruvini bajarish yaxshi bo'lardi. :-)
qo'shib qo'ydi muallif GregL, manba
Uslub nomi asosida, bu yorliq ochiq bo'lsa, bu elementlarga doimiy ravishda qo'shimchalarmi? Rahmat.
qo'shib qo'ydi muallif threepoint1416, manba
Yaxshiyamki, men bu usulni o'zim ishlab chiqargan narsaga qo'lladim. Lekin agar kerak bo'lsa, javobingizni @GregLga yo'naltiraman. Katta rahmat
qo'shib qo'ydi muallif threepoint1416, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb