about jquery.on in jquery.treetable.js

about jquery.on in jquery.treetable.js

Hi:

I dive into jquery.treetable.js source codes recently, and find a question about the using of $.on(), $.off().

The code snippet is as following:
JQuery Part:
  1. this.indenter.html(this.expander);
    target = settings.clickableNodeNames === true ? this.treeCell : this.expander;

    target.off("click.treetable").on("click.treetable", handler);
    target.off("keydown.treetable").on("keydown.treetable", function (e) {
        if (e.keyCode == 13) {
            handler.apply(this, [e]);  //keycode 13 = Enter
        }
    });



Html Part:
  1. <table id="myTreeTable" border="1" style="border-collapse: collapse;" cellpadding="5" class="table treetable"><thead>
        <tr>
            <th>Model</th>
            <th>Name</th>
            <th>Share</th>
            <th>Price Range</th>
            <th>Brand</th>
        </tr>
    </thead><tbody><tr id="tree_tr_0" data-node-id="1" class="branch expanded">
        <td columname="Model"><span class="indenter" style="padding-left: 0px;"><a href="#" title="Closing">&nbsp;</a></span>Iphone 18</td>
        <td columname="Name">iOS</td>
        <td>
        <button id="btnCreateTreeTable" type="button">Try</button>
        </td>
        <td columname="Price Range">$800 - $1000</td>
        <td columname="Brand">Apple</td>
    </tr><tr id="tree_tr_1" data-node-id="2" data-parent-id="1" class="leaf collapsed" style="display: table-row;">
        <td columname="Model"><span class="indenter" style="padding-left: 19px;"></span>Iphone 18</td>
        <td columname="Name">iOS</td>
        <td>
        <button id="btnCreateTreeTable" type="button">Try</button>
        </td>
        <td columname="Price Range">$800 - $1000</td>
        <td columname="Brand">Apple</td>
    </tr><tr id="tree_tr_2" data-node-id="3" class="leaf collapsed">
        <td columname="Model"><span class="indenter" style="padding-left: 0px;"></span>Lumia </td>
        <td columname="Name">Windows Phone</td>
        <td>
        <button id="btnCreateTreeTable" type="button">Try</button>
        </td>
        <td columname="Price Range">$200 - $600</td>
        <td columname="Brand">Nokia</td>
    </tr><tr id="tree_tr_3" data-node-id="4" class="leaf collapsed">
        <td columname="Model"><span class="indenter" style="padding-left: 0px;"></span>Nexus 23</td>
        <td columname="Name">Android</td>
        <td>
        <button id="btnCreateTreeTable" type="button">Try</button>
        </td>
        <td columname="Price Range">$600 - $800</td>
        <td columname="Brand">Samsung</td>
    </tr></tbody></table>


And I try to use following codes to replace the origin one:
  1. target.off("click", "#myTreeTable").on("click", "#myTreeTable", handler);
    target.off("keydown", "#myTreeTable").on("keydown", "#myTreeTable", function (e) {
        if (e.keyCode == 13) {
            handler.apply(this, [e]);  //keycode 13 = Enter
        }
    });

But the result is the function failed to bind to target, it not working when click the
<a href="#" title="Closing">...</a> . I don't know why it not working well. My jQuery version is  v1.12.4. Is there any one know the exact answer? Thanks a lot.