JQuery .on(): Delegating to an enclosing DIV

[K Mansoor]

Can a <DIV> element be used to delegate events bound to elements which will come into existence in the future?

<div id="main-content">

<div id="a-child-div">
<!-- A form will be loaded here dynamically thru ajax call, that form will have a button with an id='some-button-id' -->
</div>
</div>

Can I do something like this? please keep in mind at the execution of this code, the form and it's children (the button with id='some-button-id') does not exist.

$(document).ready(function(){
 $('#main-content').on('click', '#some-botton-id', function() {
    
  }
}

This is not working for me, however, the following does work:

$(document).on('click', '#some-botton-id', function() {
    
  }

[Bear Bibeault]

Should work. Please post an SSCCE (Short Self-Contained Correct Example)

[K Mansoor]

As I started to construct the example. The code started to work. Browser caching? not sure.
Thank you.

[Bear Bibeault]

If only all problems resolved themselves so easily!