I'm working on a calendar. It's working, and its possible to enter new appointments through a jQuery call and a PHP post.
But, I put in an adjust button and a delete button as an image to the appointment, which is nested as span in a table cell. I can select the td class and add appointments, but I can't select the adjust and trash buttons, except when I disable the on() event on the td element.
$(document).ready(function() {
$('.adjust').on('click', function() {
$('#popupsubmit').val("Aanpassen");
$('#afspraakinfo').text('Afspraak aanpassen:');
$('#popup').show(800);
});
$('.trash').on('click', function() {
$('#popupsubmit').val("Verwijderen");
$('#afspraakinfo').text('Afspraak verwijderen:');
$('#popup').show(800);
});
$('.inhoud').click(function() {
var trimTime = $.trim($(this).parent().text());
var aanVang = moment(trimTime, "HH:mm").format('HH:mm');
$('input[name="vanaf"]').val(aanVang);
var startTime = trimTime;
var newTime = moment(startTime, "HH:mm").add(50, 'minutes').format('HH:mm');
$('input[name="tot"]').val(newTime);
$('#popupsubmit').val("Toevoegen");
$('#afspraakinfo').text('Nieuwe afspraak:');
$('#popup').show(800);
});
});.inhoud {
position: relative;
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
text-align: left;
}
.overlay {
position: absolute;
width: 100%;
background-color: rgba(200, 200, 200, 0.7);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th class="headcol" id="11:00:00">11:00</th>
<td class="inhoud">
<span class="overlay" id="2" style="z-index:1000;top:50%;height: 83%;">xxxx van 11:30:00 tot 12:20:00</span>
<span style="z-index:1001;position:absolute;top:50%;right:0px;">
<img src="https://via.placeholder.com/50" style="cursor:pointer;" class="adjust">
<img src="https://via.placeholder.com/50/cc0000" style="cursor:pointer;" class="trash">
</span>
</td>
</tr>The HTML code is dynamically generated.