Sayfaya sonradan eklenen elemanlara ulaşma
Not Projemde jquery 3,6 ve boostrap 5 kullanıyorum
indexphp sayfamda klası global olan bir divim var sayfada ilgili butona tıklanınca bu global div içine jquery load metoduyla modal.php yi include edip ardından görünür hale getiriyorum
<div class="global"></div>
$.modalAc=function (mod) {
$('.global').load('modal.php',function () {
var myModal = new bootstrap.Modal(document.getElementById('ilAyarla'));
myModal.show();
});
}
}
buraya kadar sıkıntı yok lakin açılan modal içindeki devamet butona tıklanınca işlem yaptıramıyorum sorunum bu
********** Şu fonk çalıtıramyorum ************
$('#ilAyarla .btn').on('click',function () {
alert()
});
<form class="modal fade" id="ilAyarla" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg shadow-lg">
<div class="modal-content">
<div class="modal-header border-0">
<h5 class="modal-title" id="exampleModalLabel">İl ilçe seçiniz</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6">
<?php require '../../cache/il.php';?>
<select class="form-control mt-3 ilce" name="ilce" required><option value="">İlçe</option></select>
</div>
<div class="col-12 col-md-6 d-flex align-items-center">
<img class="m-auto img-fluid" src="img/global/ok.webp"/>
</div>
</div>
</div>
</div>
<div class="modal-footer border-0 justify-content-start">
<button type="button" class="btn btn-sm btn-outline-info ms-3" onclick="$.ilAyarla()">Devam et</button>
</div>
</div>
<div class="data pe-auto"></div>
</div>
</form>
live click işlemine ihtiyacın var, sonradan eklenen elemanlar için event'larını şu şekilde tanımlarsan sorunun çözülür
$(document.body).on('click', '#ilAyarla .btn', function(e) {
alert('test');
});