$(document).on("select_node.jstree, "#jsTree" が動かない

###前提・実現したいこと
javascriptとjqueryを用いています。
jsTreeの要素を選択するとイベントを発生させたいです。
その時に、以下のコードで動かしたいと思っています。
ですが、コンソールが出ません。

$(document).on("select_node.jstree", "#jstree", (e, data) => {
    console.log("document");
});

###動かないコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>jsTree</title>
6    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
9</head>
10<body>
11    <div id="jstree"></div>
12    <script type="text/javascript">
13    $(() => {
14        $('#jstree').jstree({ 'core' : {
15            'data' : [
16                {
17                    'text' : 'Root node 1',
18                    'state' : {
19                        'opened' : true,
20                    },
21                    'children' : [
22                        {
23                            'text' : 'Child 1'
24                        },
25                        {
26                            'text' : 'Child 2'
27                        },
28                    ]
29                }
30            ]
31        }});
32        $(document).on("select_node.jstree", "#jstree", (e, data) => {
33            console.log("document");
34        });
35        $("#jstree").on("select_node.jstree", (e, data) => {
36            console.log("jstree");
37        });
38    });
39    </script>
40</body>
41</html>

###該当のソースコード

js
1$(document).on("select_node.jstree", "#jstree", (e, data) => {
2    console.log("document");
3});
4$("#jstree").on("select_node.jstree", (e, data) => {
5    console.log("jstree");
6});

###試したこと
以下のようなコードだったら動きました。
これを、どうにか$(document)で動かしたいです。

js
1$(document).on("click", "#jstree", (e, data) => {
2    console.log("document");
3});
4$("#jstree").on("select_node.jstree", (e, data) => {
5    console.log("jstree");
6});

回答1件

ベストアンサー

カスタムイベントでDOMイベントを伴わないので、そのままだとバブリングしないと思います。

jQueryのバージョンによっては動かないかもしれませんが、動作するサンプルを提示します。

javascript
1$.event.special.select_node = {delegateType: 'click'};
2$(document).on("select_node.jstree", "#jstree", (e, data) => {
3    console.log("document",e);
4});

投稿2017/11/11 03:40

Lhankor_Mhy

総合スコア33641

回答へのコメント

tomato.ninjin

2017/11/11 04:10 編集

ご回答ありがとうございます。無事に動きました。 $.event.special.select_node = {delegateType: 'click'}; のようなコードがあるのですね。頂いたコードを以下のようにして使うようにします！ $.event.special.select_node = {delegateType: 'click'}; $(document).on("select_node.jstree", "#jstree .jstree-anchor", (e, data) => { console.log("document",e); });