Jquery script breaks when declaring variable
<p>I ran into a problem when I declare a variable for my parent div.</p>

<p>The div structure is as follows:</p>

<pre><code>&lt;div id="files"&gt;
    &lt;div id="1"&gt;&lt;/div&gt;
    &lt;div id="2"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When the user clicks on one or two i need to get the parent id. I can do this but then the script does not work. Here is the script.</p>

<pre><code>$(document).bind("contextmenu", function(event) { 
    event.preventDefault();         

    var pid = $("#" + event.target.id).parent().attr("id");
    if (pid === "files") {
        $("&lt;div class='custom-menu'&gt;&lt;a onclick='fileHide()'&gt;Open&lt;/a&gt;&lt;br/&gt;&lt;a onclick='newfile()'&gt;Rename&lt;/a&gt;&lt;br/&gt;&lt;a href='#'&gt;Share Folder&lt;/a&gt;&lt;br/&gt;&lt;a href='#'&gt;Delete&lt;/a&gt;&lt;/div&gt;")
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});      
    } else {
        $("&lt;div class='custom-menu'&gt;&lt;a onclick='fileHide()'&gt;Upload&lt;/a&gt;&lt;br/&gt;&lt;a onclick='newfile()'&gt;New Folder&lt;/a&gt;&lt;br/&gt;&lt;a href='#'&gt;Share Folders&lt;/a&gt;&lt;br/&gt;&lt;a href='#'&gt;Deleted files&lt;/a&gt;&lt;/div&gt;")
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});      
    }
}).bind("mouseup", function(event) {
    $("div.custom-menu").hide(); 
});
</code></pre>

<p>When I don't put the var in there the script will open the content menu anywhere like I want but its the same no matter where i click. When I add in the var, the else in the if statement does not work. But when I click in the parent id the menu works as it should. The purpose is to have two different content menus depending on where you click. What could be causing this issue?</p>

<p>I'm guessing the issue is a hidden error with the var being corrupt when there is no parent id. If this is so, how would I work around this</p>
