Dialog box doesn't show when calling on external js file

I'm having a problem accessing my dialog box when I try calling it on external js file, but when I call it directly inside the page it works fine. Is there a problem with my selector that it cannot find the id of the div element which is suppose to be my dialog box? here' the code inside the external js file.

$(document).ready(function() {
       var hitlistDoc = parent.document.getElementById("hitlist").contentDocument;
       var links=hitlistDoc.getElementsByName('linkComment');
       var i=0;


       $(links).each(function(){
             links[i].href='#';

              $(links[i]).click(function() {

                    $('#dialog').dialog({modal: true, position: [902, 345], width: 400 });
               开发者_如何学运维    $('#dialog').dialog('open');

               });
           i++;     
        });

    });

You may be including it wrong. Your js inclusion should be like this

<script src="path/to/jquery.js"></script>
<script src="path/to/jqueryUI.js"></script>
<script src="path/to/your/external/file.js"></script>

Note that the order is crucial.

Hope this helps. Cheers

What is parent? Is it accessible?
If it's declared as a var within another anonymous function you can't access it, try taking off "var" to make it global.

Do you get any errors in the console?