Question

My question first. How to make buttons ‘inside jsTree’ work? It worked with onclick defined.

But now I used a jQuery handler for a click on buttons. Works fine. See sample http://jsfiddle.net/radek/5xym7/4/

I copied the handler definition (below) to my existing code (bit big to copy it here & not sure which part I need to provide to debug the issue)

$('button[type=button]').click(function(){
    var params = $(this).val();
    document.getElementById("results").innerHTML+="<BR>"+params.split('|')[0]+" - "+ params.split('|')[1]+" - "+ $(this).next().prop('checked');

});

how the page look like

But it doesn’t work for buttons that are inside jsTree, On the other hand buttons outside <div id='jstree'></div> work with my handler.

html for buttons inside jsTree

<button value="login|basic" class="run square_button button_background" type="button"> run </button>
<input name="restore" title="restore before ant run" type="checkbox">

html for buttons outside jsTree

    <button class='run square_button button_background button' id='search' type='button' value='Search'>
      Search
    </button>

Answer 1

In your example, you bind to the click event from $(document).ready(), but initialize your jsTree object outside the $(document).ready() function. The jsTree creating block will execute as soon as that part of the source is loaded, while the $(document).ready() will execute later, upon the whole DOM is loaded. So essentially the jsTree contained buttons do not exist yet, when you try to bind to their click event.

Two easy ways to remedy this:

• use jQuery’s live() function to allow binding of dinamically created DOM nodes
• reorganize your code, so the jsTree initialization also takes place in your $(document).ready(), and bind to the click event after the jsTree is created

I did the latter to your fiddle, it seems to work fine now. http://jsfiddle.net/5xym7/6/