Javascript click once

Question

I have the following javascript in my 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 the respective buttons on my datable 'iframe' and 'iframe3' work fine with a normal single click. However, when i click on the respective button for iframe2 I have to click twice for the button to respond. Not necessarily double click but one click and then another. Any idea why this is happening? Since 'iframe' and 'iframe3' are associated with colorbox this is the 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 the data to 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 are working fine with a single click. The problem is 'iframe2'.

Answer 1

Simply move your click event trigger to outside the other event trigger for your tbody:

// Since the table2 click event needs to know about the data value as well,
// set it as a global, shared variable.
var data = false;
$('#example tbody').on('click', 'input', function(){ 
    // on input click, set the data to 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 is not false (aka unset), if not, execute location change
    if(data) location.href = "record_dt.php?ID="+data[0]}); 
});

Now the click event is attached on load and not after the initial click on tbody, which resulted in your initial need to click twice.