How to trigger onChange of Checkbox inside deep div using JavaScript?

I have a code :

HTML Code :

<div id='outside_div'>
    <div>
        <input type='checkbox' name='mycheckbox1'>
        <input type='checkbox' name='mycheckbox2'>
        <input type='checkbox' name='mycheckbox3'>
    </div>
    <div>
        <input type='checkbox' name='mycheckbox4'>
        <input type='checkbox' name='mycheckbox5'>
        <input type='checkbox' name='mycheckbox6'>
    </div>
</div>
<div id='another_div'>
    <div>
        <input type='checkbox' name='mycheckbox1'>
        <input type='checkbox' name='mycheckbox2'>
        <input type='checkbox' name='mycheckbox3'>
    </div>
    <div>
        <input type='checkbox' name='mycheckbox4'>
        <input type='checkbox' name='mycheckbox5'>
        <input type='checkbox' name='mycheckbox6'>
    </div>
</div>

Javascript :

$('#outside_div').on('change', 'input[type=checkbox]', function(){
      if($(this).is(':checked') ){
        console.log('CheckBox inside outside_div is checked!');
      }
}

Result :

Javascript not give response. Another way that i have tried was change #outside_div into body and it's working. But i don't want the Javascript executed for checkbox outside outside_div. Anyone can explain what's wrong with my code and share the solution to solve it ?

Thank you