rename not working jstree

rename not working jstree


I just downloaded the latest copy of jstree from the site and added the below html file to the package.



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="dist/themes/default/
style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li class="node" >Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li class="node" >Root node 2</li>
    </ul>
  </div>

  <!-- 4 include the jQuery library -->
  <script src="dist/libs/jquery.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="dist/jstree.js"></script>
  <script>
      $(function() {
          $("#jstree").jstree({
              "crrm": {
                  "input_width_limit": 2000
              },
              "plugins": ["ui", "crrm"]
          }).bind("rename.jstree", function(e, data) {
              alert(1);
              var oldText = data.rslt.old_name;
              var newText = data.rslt.new_name;
              $(this).jstree("rename");
              //do your thing
          });
          $.tree_reference('jstree').rename();

      });

  
  </script>
</body>
</html>
 

Iam not able to edit the node on double click. When i double click on the node it's not selecting the node as shown on the image attached.Can anyone please help me to figure out where i made wrong?