Question

我正在使用http://www.jasonbutz.info/bootstrap-lightbox/

中记录的自举灯箱

我的html如下所示

 <div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class='lightbox-content'>
                                    <img src="../images/details_close.png">
                                    <div class="lightbox-caption"><p>Your caption here</p></div>
                                    </div>
        </div>

和js有一个按钮onclick功能

function launchFlow(){
 $('#demoLightbox').lightbox(true);
}

当我运行页面并单击控制台中的按钮时，我看到错误：

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

plz建议如何解决它

整个js

 $("#includedContent").load("navbar.html"); 


function launchFlow(){
 $('#demoLightbox').lightbox(true);
}

function format ( d ) {
    return '<b>Critical Path: </b>' +d.CriticalPath+'&nbsp;&nbsp;<input type=\"button\" class=\"btn btn-primary btn-primary\" value=\"View Execution Path\" onclick=\'launchFlow()\'/><br/><br/><b>Debug Trace: </b>' + d.DebugTrace 
    + '<br/><br/><b>Stack Trace:</b> ' + d.MessageLong;
}

$(document).ready(function() {
    var dt =$('#feedback-data-table').DataTable( {
        ajax: {
            url: "http://127.0.0.1:7101/MUDRESTService/rest/v1/feedbacks?limit=99",
            dataSrc: "items"
        },
        columns: [
         {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { title: "App Version", data: "AppVersion" },
            { title: "Feedback Type", data: "FeedbackType" },
            { title: "OS", data: "Os" },
            { title: "OS Version", data: "OsVersion" },
             { title: "Platform", data: "Platform" },
             { title: "Model", data: "Model" },
            { title: "User", data: "ReportedBy" },
            { title: "Date", data: "ReportedDate"},
            { title: "Server Url", data: "ServerUrl" }
        ]
    } );

    // Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#feedback-data-table tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('FeedbackId'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );


             $.ajax({ url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/feedbacks/' + 
                       415 + '/child/MudFeedbackDetailsVO?onlyData=true',             
                       type: 'get',  
                        dataType: 'json',    
                       success: function(output) {     console.log(output.items[0].CriticalPath) ; 
                        results =      output.items[0];        
                        }        
              }).done(function(output){

                  row.child( format( output.items[0] ) ).show();
              });




            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('FeedbackId') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
} );

Answer 1

任何使用jQuery的JavaScript（包括函数）都应在$(document).ready(function() {范围内。此外，您的$('#demoLightbox').lightbox(true);语句永远不会运行，除非您调用它包含在其他地方的函数。

$('#demoLightbox').lightbox(true);语句应该在$(document).ready(function() {范围内，并且不需要包含在函数中，除非您需要在另一时间将灯箱功能绑定到同一元素。

例如：

$(document).ready(function() {
    $('#demoLightbox').lightbox(true);
    ...

启动弹出窗口时引导灯箱问题

1 个答案: