如何加载js文件以及正在创建的弹出窗口

Question

当弹出窗口打开时，我有四个带有onclick事件的图像 此事件将调用js文件中的现有函数，但我根本无法调用js函数。 如何加载js文件以及正在创建的弹出窗口？

 $( document ).on( "pagecreate", "#page", function() {
            $( ".webcams" ).on( "click", function() {
                var target = $( this ),
                    brand = target.find( "h2" ).html(),
                    model = target.find( "p" ).html(),
                    port = target.find( "p1" ).html(),
                    short = target.attr( "id" ),
                    closebtn = '<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>',
                    header = '<div data-role="header"><h2>' + brand + ' ' + model + '</h2></div>',
                    img = '<img id="buffer" alt="" /><div style="width:0px; height:0px; overflow:hidden;"><img id="video" alt="" /><a href="#"><img src="img/left.png" style="overflow:hidden; position:absolute; left:4px; top:244px; width:55px; height:55px; background:none;" onclick="**sendirections("left",' + port + ')**" id="left" alt="" title="" /></a><a href="#"><img src="img/up.png" style="overflow:hidden; position:absolute; left:296px; top:44px; width:55px; height:55px; background:none; " id="up" alt="" title="" /></a><a href="#"><img src="img/down.png" style="overflow:hidden; position:absolute; left:296px; top:460px; width:55px; height:55px; background:none; " id="down" alt="" title="" /></a><a href="#"><img src="img/right.png" style="overflow:hidden; position:absolute; left:581px; top:244px; width:55px; height:55px; background:none; " id="right" alt="" title="" /></a></div>',
                    popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15"></div>';

                // Create the popup.  
                $( header )
                    .appendTo( $( popup )
                        .appendTo( $.mobile.activePage )
                        .popup() )
                    .toolbar()
                    .before( closebtn )
                    .after( img );

                // Wait with opening the popup until the popup image has been loaded in the DOM.
                // This ensures the popup gets the correct size and position
                $( ".photo", "#popup-" + short ).load(function() {
                    // Open the popup
                    $( "#popup-" + short ).popup( "open" );

                    // Clear the fallback
                    clearTimeout( fallback );
                });

                // Fallback in case the browser doesn't fire a load event
                var fallback = setTimeout(function() {
                    $( "#popup-" + short ).popup( "open" );
                }, 2000);

                var mjpegImg = 'http://address:' + port + '/';
                $('#buffer').load(function() {
                $('#video').attr('src', this.src);
                this.src = mjpegImg + '?cache=' + new Date().getTime();
                }).trigger('load', 1);


            });

            // Set a max-height to make large images shrink to fit the screen.
            $( document ).on( "popupbeforeposition", ".ui-popup", function() {
                var image = $( this ).children( "img" ),
                    height = image.height(),
                    width = image.width();

                // Set height and width attribute of the image
                $( this ).attr({ "height": height, "width": width });

                // 68px: 2 * 15px for top/bottom tolerance, 38px for the header.
                var maxHeight = $( window ).height() - 68 + "px";

                $( "img.photo", this ).css( "max-height", maxHeight );
            });

            // Remove the popup after it has been closed to manage DOM size
            $( document ).on( "popupafterclose", ".ui-popup", function() {
                $( this ).remove();
                clearTimeout( refresh );
            });

});