مشکل در تعریف listener در jquery با each و click
سلام و درود خسته نباشید
- آقا میخام یک لیسینر خیلی ساده تعریف کنم به این صورت که یک جدول دارم ( لطفا به عکس انتها نگاه کنید)
-
میخام هر دفعه که روی دکمه edit میزنم یک لیسینر رو هندل کنم - به قولی کاری که راحت میتونیم با onclick انجام بدیم رو با تعریف یک لیسینر میخام انجام بدم. هیچکدوم از این کد ها برام کار نکرد که نکرد ؟؟!!!
document.querySelectorAll('.button-edit-post').forEach(item => { item.addEventListener('click', event => { //handle click console.log("clicked") }) }) $( ".button-edit-post" ).each(function(index) { $(this).on("click", function(){ console.log('clicked') }); });
پاسخها
9
درسته، اگه عناصر شما جزئی از DOM نباشند، از ابتدا انتخاب نخواهند شد تا رویدادها براش تعریف بشه.
راه حل می تونه این باشه که بر اساس عنصر موجود دیگری که از قبل در صفحه موجود هستش، این دکمه ها رو شناسایی کنید و رویدادها رو براش ایجاد کنید.
در اینجا فرض می کنم که ساختار html تون طوری هستش که در صفحه یک عنصر با شناسه table-posts دارید و جدول تون رو داخل این عنصر تشکیل می دید. بدین صورت کدنویسی کنید:
var tablePosts = document.querySelector('#table-posts');
tablePosts.addEventListener('click', e => {
if (e.target.matches('.button-edit-post')) {
// button-edit-post is clicked
console.log("clicked")
}
});کدهای جاوااسکریپت تون به نظرم صحیح هستش.
کدهای HTML جدول تون رو قرار بدین. 4 سطر کد از جدول باشه کافیه. احتمالا ایراد از این بخش باشه.
@milad
درود آقا میلاد .
من با yajraBbox دارم اطلاعات رو تولید میکنم( اطلاعات جداول که شامل دکمه هم میشه ) - به نظرم به همون دلیل که نمیتونم به قولی گوش بدم چون کدش اصلا وجود نداره توی صفحه یا در واقع با javascript تولید شده
قبلا به این مشکل برخورده بودم(یعنی کدی که به وسیله javascript ( ajax) تولید شده بود رو نمیتونیستم مدیریت کنم) و نمیدونم چطور حلش کردم ؟؟!!!
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
همین نکته و روشی که آقا میلاد در بالا اشاره کردند رو اگر خواسته باید با JQuery پیاده سازی کنید هم خیلی راحت تره و اینجوری میشه:
$("#table-posts").on("click", ".button-edit-post", (e) => {
// button-edit-post is clicked
console.log("clicked")
});دقت کنید که در بخش اول المنتی که مطمئنیم در زمان لود صفحه وجود داره رو باید بنویسیم و بعنوان پارامتر دوم دستور on المنتی که بعدا ممکنه به DOM اضافه بشه رو مینویسیم.
دقیقا منم از روش آقای یگانه استفاده میکنم و بعضی از مواقع بجای المنت بالاتر خود داکیومنت رو فراخوانی میکنم .
عملا مشکل خاصی با فراخونی خود document بوجود نمیاد و شما میتونید همیشه از همین روش استفاده کنید. متاسفانه خیلی ها رو دیدم همین کار رو هم انجام میدهند.
ولی از نظر بهره وری تفاوت های زیادی با هم دارند. اون جوری شما مرورگر رو مجبور میکنید به ازای هر کلیک در کل صفحه (!) یکبار دستورات رو اجرا و چک کنه که آیا target مقدار مورد نظر شما هست یا نه که خیلی بهینه به نظر نمیرسه. مگر اینکه در شرایطی که واقعا چاره دیگه ای نباشه.
ممنون از آقا میلاد و آقای یگانه - من از کد جی کوئری آقای یگانه استفاده کردم . اما به اطلاعات (data-idpost) دسترسی ندارم ؟!! اینو چکار کنم باید ؟
<button type="button" class="btn btn-sm btn-outline-info button-info-post" data-postid="{{$post->id}}" >
<i class="fa fa-info"></i>
</button>درود مشکل حل شد - تشکر فراوان
// listener click info
$("#postTable").on("click", ".button-info-post", function() {
// button-edit-post is clicked
let postId=$(this).data('postid')
infoPost(postId)
});
// listener click infoسرزنده باشین 👍