悬停时替换文本不起作用（jQuery）

Question

我无法使用我的一项功能。 我的假设是存在一个“范围”问题，原因是该函数在修改后的同一文件中使用时起作用。 无论如何，这里是功能和小提琴。 标题所建议的功能应在悬停时替换文本，并且“悬停”可将原始文本放回原处。 下面的代码段有效，但是当我尝试（拨弄）它时，它不起作用。 http://jsfiddle.net/s4q8bva6/3/

<!DOCTYPE html>
<html>
<head>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<a href="#" class="open">01 - System Overview and System Manager</a>


<script>
$("a.open").hover(
    function() {
        var $this = $(this);
        $this.data('initialText', $this.text());
        $this.text("Click to return to previous page");
    },
    function() {
        var $this = $(this); // caching $(this)
        $this.text($this.data('initialText'));
    }
);        
</script>

</body>
</html>

编辑：更新

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PHP File Tree Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="styles/default/default.css" rel="stylesheet" type="text/css" media="screen" />

    <!-- Makes the file tree(s) expand/collapsae dynamically -->
    <script src="php_file_tree.js" type="text/javascript"></script>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


</head>

<body>

    <h1>File Tree </h1>     


    <h2>Browsing Training Videos...</h2>

    <?php

     //This links the user to http://example.com/?file=filename.ext
    //echo php_file_tree('Training/', "http://example.com/?file=[link]/");

    include("php_file_tree.php");
    // This links the user to http://example.com/?file=filename.ext and only shows image files
    $allowed_extensions = array("htm");
    echo php_file_tree("Training/", "http://URL/files/[link]", $allowed_extensions);
    echo "This is a TEST";
    // This displays a JavaScript alert stating which file the user clicked on
    //echo php_file_tree("demo/", "javascript:alert('You clicked on [link]');");            
    ?>

    <!-- This function collapses the li under an open li-->





    <!-- Togles all 'Other' Top Level il elements on click-->
    <script>
        $(document).ready(function () {
var col = 2
$(".pft-directory").click(function () {
    $(".pft-directory").toggle("fast");
    $(this).toggle("fast");
    if (col > 1) {
        $(".php-file-tree").css("columns", "1", "-webkit-columns", "1");
        col = 1;
    } else {
        $(".php-file-tree").css("columns", "2", "-webkit-columns", "2");
        col = 2;
    }

});
$(".open").hover(function () {
    var $this = $(this);
    $this.data('initial-text', $this.text());
    $this.text("Click to return to previous page");
},

function () {
    var $this = $(this); // caching $(this)
    $this.text($this.data('initial-text'));
});
});         
    </script>       

</body>

</html>