Button outside anchor

[Michael Frisch]

I integrate the given plugin to add a button outside an anchor tag. I hav now the problem that i have to click the button twice(that the button fires a function) if the node is selected.
Have anyone the same problem?

$(function () {
    // 6 create an instance when the DOM is ready
    $('#jstree').jstree({
        "core" : {
            check_callback : function (operation, node, par, pos, more) {
                if((operation === "move_node" || operation === "copy_node") && more && more.dnd) {
                    // use more.pos to update your own marker
                    if(more.pos==="a"){
                        // console.log("AFTER");
                        $("#jstree-marker").addClass("jstree-marker-after");
                        $("#jstree-marker").removeClass("jstree-marker-before");

                        //console.log(pos);

                    }
                    if(more.pos==="i"){
                        //console.log("INSIDEEEEE");
                        //console.log(pos);$("#jstree-marker").addClass("jstree-marker-after");
                        $("#jstree-marker").removeClass("jstree-marker-after");
                        $("#jstree-marker").removeClass("jstree-marker-before");


                    }
                    if(more.pos==="b"){
                        //console.log("BEFORES");
                        //console.log(pos);
                        //console.log($(id));
                        $("#jstree-marker").addClass("jstree-marker-before");
                        $("#jstree-marker").removeClass("jstree-marker-after");

                    }
                }
            }
        },
        "types" : {
            "default" : {
                "icon" : ""

            },
            "hardfact" : {
                "icon" : "",
                "valid_children" : []
            },
            "softfact" : {
                "icon" : "",
                "valid_children" : []
            }
        },
        "state" : {
            "key" : "jstree"
        },
       "dnd" : {
           "large_drop_target" : true
       },

        "plugins" : [ "state", "dnd", "wholerow" , "types","contextmenubtn" ]
    });
    // 7 bind to events triggered on the tree

    $('#jstree').on("changed.jstree", function (e, data) {

        console.log("click on node");
        var sel = $("#jstree").jstree("get_selected");


        if($(".jstree-container-ul").has("li").length!=0){
            var form_html = _.template($('#form_html').html());
            $('.form_col').html(form_html);
        }


        console.log(data.instance.get_node(data.selected[0]));



    });











    $("#jstree").bind("hover_node.jstree", function (e, data)
    {

        var item = $('#'+data.node.id).find('.jstree-contextmenubtn').get(0);
        $(item).css("display","inline-block");
    });
    $("#jstree").bind("dehover_node.jstree", function (e, data)
    {
        $('#'+data.node.id+' .jstree-contextmenubtn').css("display","none");
    });


    // 8 interact with the tree - either way is OK

    $('.dragc')
        .on('mousedown', function (e) {
            console.log("aslkdjasodkas");
            return $.vakata.dnd.start(e, { 'jstree' : true, 'obj' : $(this), 'nodes' : [{ id : true, text: $(this).html()}] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i><span class="glyphicon glyphicon-star"></span><span class="jstree-dnd-text">' + $(this).text() + '</span></div>');
        });
    $(document)
        .on('dnd_move.vakata', function (e, data) {
            var t = $(data.event.target);
           // console.log(t);
            if(!t.closest('.jstree').length) {

                if(t.closest('.drop').length) {

                   // data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');
                }
                else {
                    //data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');
                }
            }
        })
        .on('dnd_stop.vakata', function (e, data) {


            if($(".jstree-container-ul").has("li").length!=0){
                $('#placeholder-dnd').css("display","none");
                $("#jstree").css("border","none");
            }


            //$("li#j1_1").find("a").append("<span style='float: right; text-align: right;'>T</span>");

            //var dragText = $(data.element).text();


            var t = $(data.event.target);
            if(!t.closest('.jstree').length) {
                if(t.closest('.drop').length) {
                    $(data.element).clone().appendTo(t.closest('.drop'));
                    // node data:
                    // if(data.data.jstree && data.data.origin) { console.log(data.data.origin.get_node(data.element); }
                }
            }



        });

    $('.dragh')
        .on('mousedown', function (e) {
            return $.vakata.dnd.start(e, { 'jstree' : true, 'obj' : $(this), 'nodes' : [{ id : true, text: $(this).html(), type: "hardfact" }] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i><span class="glyphicon glyphicon-stop"></span><span class="jstree-dnd-text">' + $(this).text() + '</span></div>');
        });
    $(document)
        .on('dnd_move.vakata', function (e, data) {
            var t = $(data.event.target);


            if(!t.closest('.jstree').length) {
                if(t.closest('.drop').length) {

                    //data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');
                }
                else {
                    //data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');
                }
            }
        })
        .on('dnd_stop.vakata', function (e, data) {
            var t = $(data.event.target);
            if(!t.closest('.jstree').length) {
                if(t.closest('.drop').length) {
                    $(data.element).clone().appendTo(t.closest('.drop'));
                    // node data:
                    // if(data.data.jstree && data.data.origin) { console.log(data.data.origin.get_node(data.element); }
                }
            }
        });

    $('.drags')
        .on('mousedown', function (e) {
            return $.vakata.dnd.start(e, { 'jstree' : true, 'obj' : $(this), 'nodes' : [{ id : true, text: $(this).html(), type: "softfact" }] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i><span class="glyphicon glyphicon-unchecked"></span><span class="jstree-dnd-text">' + $(this).text() + '</span></div>');
        });
    $(document)
        .on('dnd_move.vakata', function (e, data) {
            var t = $(data.event.target);
            if(!t.closest('.jstree').length) {
                if(t.closest('.drop').length) {
                    //data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');
                }
                else {
                   // data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');
                }
            }
        })
        .on('dnd_stop.vakata', function (e, data) {
            var t = $(data.event.target);
            if(!t.closest('.jstree').length) {
                if(t.closest('.drop').length) {
                    $(data.element).clone().appendTo(t.closest('.drop'));
                    // node data:
                    // if(data.data.jstree && data.data.origin) { console.log(data.data.origin.get_node(data.element); }
                }
            }
        });


});



// additional icon on node (outside of anchor)
(function ($, undefined) {
    "use strict";
    var img = document.createElement('button');
    //img.src = "http://jstree.com/tree-icon.png";
    img.className = "jstree-contextmenubtn glyphicon glyphicon-trash";


    $.jstree.plugins.contextmenubtn = function (options, parent) {
        this.bind = function () {
            parent.bind.call(this);
            this.element
                .on("click.jstree", ".jstree-contextmenubtn.glyphicon.glyphicon-trash", $.proxy(function (e,data) {


                    console.log("CLICK ON TRASH");
                    //$("#jstree").delete_node([id]);
                    //$("#jstree").delete_node(element);
                    //$("#jstree").jstree("delete_node", $("#"+id));
                    e.stopImmediatePropagation();

                    $(e.target).closest('.jstree-node').children('.jstree-anchor').trigger('contextmenu');
                    var element =$(e.target).closest('.jstree-node').get(0);
                    //REMOVE NODES
                    var id = $(element).attr("id");
                    var parentNode = $('#jstree').find("#"+id);



                    /*$(parentNode).remove();*/
                    //console.log($('#jstree').jstree(true));
                    $('#jstree').jstree(true).delete_node(id);
                    // console.log($(".jstree-container-ul").has("li").length);
                    if($(".jstree-container-ul").has("li").length===0){
                        $("#placeholder-dnd").css("display","block");
                        $("#jstree").css("border","1px dashed #b1b1b1");
                        var viewportHeight = $(window).height();
                        $('.jstree-container-ul').css('height',viewportHeight-200);
                    }

                    var form_html_empty = _.template($('#form_html_empty').html());
                    $('.form_col').html(form_html_empty);



                }, this));
        };
        this.teardown = function () {
            this.element.find(".jstree-contextmenubtn").remove();
            parent.teardown.call(this);
        };
        this.redraw_node = function(obj, deep, callback, force_draw) {
            obj = parent.redraw_node.call(this, obj, deep, callback, force_draw);
            if(obj) {
                var tmp = img.cloneNode(true);
                obj.insertBefore(tmp, obj.childNodes[2]);
            }
            return obj;
        };
    };})(jQuery);