.load with jsTree

Question

私は友人がjsTreeをセットアップしようとしているのを手伝っています。ノードをクリックすると、別のdivにページが読み込まれるようにします。しかし、すべてが機能しているようですが、何らかの理由で.loadが起動しません。私はthisItemを確認するためにアラートを使用しました。これは定義されており、正しい変数です。

$(function() { 

    $('.tree').jstree().delegate("a", "click", function(event, data){ 
     event.preventDefault(); 
     var thisItem = $(this).attr('id'); 
     thisItem += ".html"; 
     alert(thisItem); 
     $('.table').load(thisItem); 
     }); 

}); 

これはHTMLです：

<div class = "tree"> 
    <ul> 
    <li id = "1"><a href = "" id = "1">Test 1</a> 
     <ul> 
     <li id = "2"><a href = "" id = "2">Test 2</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
<div class = "table"> 
</div> 

は私がtableにロードするこれらのIDに対応したページを持っています。これはjstreeなしで正常に動作します.click ...しかし、私はjstreeで使用したいと思います。

jstreeを使用しているときにページが読み込まれない理由はわかりませんが、jstreeを使用しないと動作します。私は.tree liの上にある.clickをjstreeの外で試してみましたが、それもうまくいきませんでした。 （私はjstreeものを取り除くすべて一緒にここにこのコードが動作する場合。）

$('.tree li').click(function() { 
     var thisItem = $(this).attr('id'); 
     thisItem += ".html"; 
     $('.table').load(thisItem); 
    }); 

注：これは単にプロジェクトのよりダイナミックな作品のためのテストです。

Answer 1

あなたはこのケースで探している1がselect_node.jstreeで、jstree要素にカスタムイベント（some-event.jstree）を結合することによって、独自のコードを実行することができます

$('.tree').bind("select_node.jstree", function (e, data) { 
    var $obj = data.rslt.obj; // this will be a jquery object representing the <li> you've clicked 
    var url = $obj.attr("id") + ".html"; 
    $('.table').load(url); 
}); 

に渡されたdataオブジェクトに関する情報コールバック関数（jstree documentationから）：

{ 
    "inst" : /* the actual tree instance */, 
    "args" : /* arguments passed to the function */, 
    "rslt" : /* any data the function passed to the event */, 
    "rlbk" : /* an optional rollback object - it is not always present */ 
} 

希望します。

Answer 2

は、ここに最初のデモをチェックアウト：私は、彼らが独自のカスタムイベントを使用するようプラグイン自体は、クリックハンドラをアンバインド信じるようhttp://www.jstree.com/documentation/core#demos

あなたのクリックハンドラは動作しません。最初のデモと同じ方法でこれらのイベントにバインドすることができます。

$("#demo1").jstree("toggle_node","#phtml_1"); 
$("#demo1").bind("open_node.jstree close_node.jstree", function (e) { 
    //Stuff 
}); 

イベントは、フォーム "機能 .jstree" に従うように見えます。したがってopen_node関数が発生した後にopen_node.jstreeイベントが発生します。上記の同じリンクに機能リストがあります。