t1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>
	<style>
	html { margin:0; padding:0; font-size:62.5%; }
	body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
	h1 { font-size:1.8em; }
	.demo { overflow:auto; border:1px solid silver; min-height:100px; }
	</style>
	<link rel="stylesheet" href="lib/themes/default/style.min.css" />
</head>
<body>
	
	<h1>Lazy loading demo</h1>
	<div id="lazy" class="demo"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="lib/jstree.min.js"></script>
	
	<script>
	
	// lazy demo
	$('#lazy').jstree({
		'core' : {
			'data' : {
				"url" : "api.php",
				"data" : function (node) {
					return { "id" : node.id };
				}
			}
		}
	});
	$('#lazy').on("changed.jstree", function (e, data) {
		console.log(data.selected);
	});
	</script>
</body>
</html>