JavaScript 点击一次

Question

我的网站中有以下 JavaScript:

$('#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]});  


        });


    } );

当单击我的数据表“iframe”和“iframe3”上的相应按钮时，只需正常单击即可正常工作。但是，当我单击 iframe2 的相应按钮时，我必须单击两次按钮才能响应。不一定是双击，而是单击一下，然后再单击一次。知道为什么会发生这种情况吗？由于“iframe”和“iframe3”与 colorbox 相关联，因此这是各自的代码:

完整代码:

<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>

只需单击一下即可正常工作。问题是“iframe2”。

Answer 1

只需将您的点击事件触发器移至您的 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]}); 
});

现在，点击事件是在加载时附加的，而不是在首次点击 tbody 后附加的，这导致您最初需要点击两次。