노드 내부의 클릭 가능한 버튼

Question

TL - JS 리디렉션을 사용하지 않고 jsTree 노드에서 작동 링크를 사용할 수 있습니까?

---

나는이처럼 jsTree 노드 내부에 버튼을 추가하고 싶습니다 :

가이 코드를 사용 :

$('#tree').jstree({ 
 
    'core': { 
 
     'multiple': false, 
 
     'themes': { 
 
      'responsive': false 
 
     } 
 
    } 
 
});

/* custom */ 
 
body { 
 
    font: 14px/14px "Lucida Sans Unicode", "Lucida Grande", sans-serif normal; 
 
} 
 
.actions a { 
 
    background: #333; 
 
    color: #ccc; 
 
    font-size: 11px; 
 
    line-height: 18px; 
 
    border-radius: 4px; 
 
    padding: 0 5px; 
 
    text-decoration: none; 
 
} 
 
.actions a:hover { 
 
    background: #999; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/style.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.1/jstree.min.js"></script> 
 
<div id="tree"> 
 
    <ul> 
 
     <li> 
 
      <span class="content">Folder</span> 
 
      <ul> 
 
       <li> 
 
        <span class="content">Subfolder</span> 
 
        <ul> 
 
         <li> 
 
          <span class="content">File</span> 
 
          <span class="actions"> 
 
           <a href="/open">open</a> 
 
           <a href="/delete">delete</a> 
 
          </span> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

내 홍보 oblem은 jsTree가 각 노드 (의미 적 목적을 위해)에 <a> 태그를 만들고 모든 click 이벤트를 인터셉트한다는 것입니다. 내 앵커가 새 페이지를 열어야하지만 지금은 아무 일도 일어나지 않습니다.

는

저자는 작업 나 자신을 changed.jstree 이벤트를 듣고 할 것을 권장합니다 내가 JS 리디렉션을 사용하기를 원한다면

$('#tree').on('changed.jstree', function (e, data) { 
    document.location = data.instance.get_node(data.selected[0], true).a_attr.href; 
}).jstree(); 

이 솔루션은 완벽하게 받아 들일 것입니다. 하지만 나는 그렇지 않습니다.
현재 jsTree 소스 코드를 편집하여 이벤트 차단 (you can have a look on this rejected PR)을 피했지만 작성자가 언급 한 것처럼이 방법은 좋지 않습니다. 그래서 여기 내 마지막 질문 :

JS 리디렉션을 사용하지 않고 jsTree 노드에서 작동 링크를 사용할 수있는 방법이 있습니까?

제안 사항이 있어도 이벤트를 수신/트리거하고 내 HTML 마크 업을 재구성 할 수 있습니다.

Answer 1

당신이 시도 할 수 있습니다 :

$('#tree').on('ready.jstree', function() { 
    $('#tree').off("click.jstree", ".jstree-anchor"); 
}) 

Answer 2

둘러보기 here 이 플러그인을 필요에 맞게 수정 한 다음 페이지 및 plugins 구성 배열에 포함하십시오. 앵커 안에 단추를 포함시키기 위해 이것을 수정할 수도 있습니다 (이 예에서는 목록 요소에 단추가 포함되어 있습니다). 유효한 요소가 포함되어 있는지 확인하십시오 (예 : SPAN 또는 I).