JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<form>
  <div id="tree1">
    <ul>
      <li id="1">親1</li>
      <li id="2">
        親2
        <ul>
          <li id="3">
            子2-1
            <ul>
              <li id="11">孫3</li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="7">
        親7
        <ul>
          <li id="4">
            子7-1
            <ul>
              <li id="8">孫</li>
              <li id="9" data-jstree='{"opened":true,"selected":true}'>
                孫２
                <ul>
                  <li id="10">ひ孫</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</form>

JavaScript

$(function(){
  
  $('#tree1').jstree();
  
  $("div > ul").on('click', 'li', function(event){
      var dept_txt = $(this).text();
      var dept_id = $(this).attr('id');
      alert(dept_txt);
      alert(dept_id);
      
      event.stopPropagation();
  });
    
});