jquery - Javascript click once -

i have following javascript in website:

$('#example tbody').on( 'click', 'input', function () {              var data = table.row( $(this).parents('tr') ).data();              $(".iframe").colorbox({href:"session_edit.php?id="+data[0]});              $(".iframe3").colorbox({href:"delete.php?id="+data[0]});              $(".iframe2").click(function() {location.href = "record_dt.php?id="+data[0]});             });       } ); 

when clicking respective buttons on datable 'iframe' , 'iframe3' work fine normal single click. however, when click on respective button iframe2 have click twice button respond. not double click 1 click , another. idea why happening? since 'iframe' , 'iframe3' associated colorbox respective code:

full code:

<script>  $(document).ready(function()         {             $(".iframe").colorbox({iframe:true, width:"700px", height:"80%"});             $(".iframe3").colorbox({iframe:true, width:"300px", height:"20%", onload: function() {                 $('#cboxclose').remove();             }});           });  </script>  <script type="text/javascript" language="javascript" class="init">     $(document).ready(function() {         var table = $('#example').datatable( {             "columndefs": [ {                 "targets": -1,                 "data": null,                 "defaultcontent": "<input type='image' src='delete.png' id='button' >"             },              {                 "targets": -2,                 "data": null,                 "defaultcontent": "<input type='image' src='edit.png' id='button' >"             },              {                 "targets": -3,                 "data": null,                 "defaultcontent": "<input type='image' src='edit.png' id='button'>"             }               ],             "order": [[ 0, "desc" ]]         } );           var data = false;         $('#example tbody').on('click', 'input', function(){              // on input click, set data new value             data = table.row( $(this).parents('tr') ).data();             $(".iframe").colorbox({href:"session_edit.php?id="+data[0]});             $(".iframe3").colorbox({href:"delete.php?id="+data[0]});         });         $(".iframe2").click(function()                 {              if(data) {location.href = "record_dt.php?id="+data[0];}              });        });       </script> 

these working fine single click. problem 'iframe2'.

simply move click event trigger outside other event trigger tbody:

// since table2 click event needs know data value well, // set global, shared variable. var data = false; $('#example tbody').on('click', 'input', function(){      // on input click, set data new value     data = table.row( $(this).parents('tr') ).data();     $(".iframe").colorbox({href:"session_edit.php?id="+data[0]});     $(".iframe3").colorbox({href:"delete.php?id="+data[0]}); }); $(".iframe2").click(function(){     // check if data not false (aka unset), if not, execute location change     if(data) location.href = "record_dt.php?id="+data[0]});  }); 

now click event attached on load , not after initial click on tbody, resulted in initial need click twice.