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]});  


        });


    } );

点击我的数据表上的相应按钮＆＃39; iframe＆＃39;和＆＃39; iframe3＆＃39;通过正常的单击即可正常工作。但是，当我单击iframe2的相应按钮时，我必须单击两次按钮才能响应。不一定是双击，而是一次点击，然后是另一次。知道为什么会这样吗？因为＆＃39; iframe＆＃39;和＆＃39; iframe3＆＃39;与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>

只需单击一下即可正常工作。问题是＆＃39; iframe2＆＃39;。

Answer 1

只需将您的点击事件触发器移动到外您的其他事件触发器：

// 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后，这导致您最初需要点击两次。

Answer 2

您正在$（＆＃39; #example tbody＆＃39;）点击事件中定义iframe2点击事件。因此，首次点击它会点击点击事件，然后第二次点击它。

Javascript点击一次

2 个答案: