Łącza drzewa JS nie są aktywne

Question

Jestem nowym użytkownikiem Jquery i JS Tree, ale uczę się go kochać. Ustawiłem w górę menu drzewa używając php generowanego xml (patrz kod poniżej). Działa jako spodziewany z jednym wyjątkiem - łącza nie są aktywne.

Wiem, że jest coś podstawowego, czego nie rozumiem. Krótkookresowy Ja tylko chce, aby linki działały jak normalne linki. Na dłuższą metę chcę, żeby zadzwonili do ajaxera, który przeładuje określony element div na stronie.

Czy ktoś może wskazać mi właściwy kierunek? Wielkie dzięki za pomoc!

$(function() { 
     $("#mainMenu").jstree({ 
       xml_data : { data : <?php $menu->deliver(); ?> }, 
       core : { animation : 1000 } 
       ui : { select_limit : 1, selected_parent_close : false }, 
       themes : { theme : "default", dots : true, icons : false }, 
       types : { types : { "heading" : { select_node : true } } }, 
       plugins : [ "themes", "xml_data", "ui", "types" ] 
     }); 
}); 

Przykład xml (pojedynczy element):

"<root><item id='pubPages_home' parent_id='0'><content><name href='? 
a=pubPages&amp;f=home'>Public Home</name></content></item><root>" 

Answer 1

myślę, że trzeba wyraźnie napisać obsługi kliknij na linki węzłów drzewa. JsTree bierze wydarzenie click dla siebie i nie pozwól mu przejść do przekierowania strony.

chciałbym spróbować iść w ten sposób:

$('#mainMenu').bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.attr("href"); 
}); 

Answer 2

wiem, że to jest stary, ale ja przyszedłem tutaj szukają szybkiej i taniej. Lubor Bílek jest w większości poprawny, ale pamiętaj, że jsTree zwiąże z rodzicem <li> klikniętego elementu kotwicy.

I rozwiązać ten wykonując:

.bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.find('a').attr("href"); 
}); 

ten sposób, zdarzenie będzie wiązać się z dzieckiem <a> z <li> zamiast samego <li>, tak że można mieć atrybut href na swoje kotwice zamiast Twoje pozycje na liście.

Answer 3

Znajduję prosty sposób.

$('#'+target).jstree({ 'core' : { 
    'data' : treeInfo 
} }); 

$(".jstree-anchor").click(function() 
{ 
    document.location.href = this; 
}); 

Znalazłem, że jstree użył klasy "jstree-kotwica" dla list li. Tak, mogę znaleźć link href z tego obiektu, mogę zrobić ten link bez żadnych funkcji granicznych.

Answer 4

próbuję ten kod:

window.location.href = data.rslt.obj.find('a').attr("href"); 

Podniesie data.rslt niezdefiniowany błąd, więc nie mogę dostać href z nim!

tutaj jest mój kod dostępny:

$("#mytree").bind("select_node.jstree", function(e, data) { 
    window.location.href = data.node.a_attr.href; 
}); 

jest związany z wersją jstree? Moja wersja jstree: 3.0.0-bata10

Answer 5

  .bind("select_node.jstree", function (e, data) { 
       var href = data.node.a_attr.href 
       document.location.href = href; 
      }) ; 

Wersja jstree: "3.0.0" , jQuery: Ostatni

zmiana: lub najlepszym sposobem dla mnie:

.bind("select_node.jstree", function (e, data) { 
    $('#jstree').jstree('save_state'); 
}) ; 

.on("activate_node.jstree", function(e,data){ 
    window.location.href = data.node.a_attr.href; 
}) 

Answer 6

Rozwiązałem już ten problem z trochę brutalnej siły

<li id="child_node_1"><span onClick="javascript:window.location.href='your_page.html'" title="Lassie come home!">your text here</span></li> 

łatwo i przyjemnie

Answer 7

Spróbuj tego:

jQuery("#mytree ul").on("click","li.jstree-node a",function(){ 
    document.location.href = this; 
}); 

Dzięki jQuery event delegation wydarzenie to zostanie przekazane do elemetów <a>. jeśli nie skorzystasz z delegacji wydarzeń, uruchomi się ona po raz pierwszy, klikając każdą kotwicę.

Answer 8

Zazwyczaj musimy kontrolować działanie zarówno "węzłów kontenerowych", jak i "węzłów potomnych".

więc możemy zrobić thomething jak:

$("#jstree-div").jstree().delegate("a","click", function(e) { 
      if ($("#jstree-div").jstree("is_leaf", this)) { 
       document.location.href = this; 
      } 
      else { 
       $("#jstree-div").jstree("toggle_node", this); 
      } 
     }); 

„is_leaf” jest jedną z funkcji jsTree która sprawdza czy węzeł nie ma dzieci.