I'm trying to set up click event registration for initially loaded 'link' class div's plus any others that the user will add later within the 'linksPanelHdr' div. I've studied the existing SO answers on how to do this but I must be missing something basic.
With this html:
<div class="linksPanelHdr">
<div id="171" class="link">
<span class="delButt">Delete Link</span>
<span class="openButt">Open Link</span>
</div>
</div>
and with this jq:
$(".linksPanelHdr").on("click",".delButt",function(){
alert("Triggered by link"+$(this).parent().attr('id'));
});
As I understand it this jq should trigger the alert when any 'delButt' class element that's a descendant of any 'linksPanelHdr' class element in the dom is clicked. But Firefox Inspector shows that the event is not registered either when it's in the initial load or if it's in a link that's added dynamically. And of course the click event fails to fire.
If I replace the .delButt selector with 'null' the event fires when I click inside the 'linksPanelHdr' div. Can anyone tell me where I'm screwing up? Thanks in advance.