Могу ли я отобразить / создать jsTree по нажатию кнопки?

Question

У меня есть div id="result", который я использую для отображения результатов действий пользователя.Я положил туда простой текст и HTML тоже.После каждого действия пользователя этот div перезаписывается новым results.

Теперь я хочу отобразить внутри этого div экземпляр jsTree У меня есть рабочий jsTree, который прекрасно загружается при загрузке страницы, но не загружается после вставки <div id="tree"></div> в мой результат div.

Я попробовал две строки ниже, но ни одна из них не сработала.

 $("#tree").jstree("loaded");  
 $("#tree").jstree("refresh"); 

Есть идеи, как сделать, чтобы jsTree отображалось после нажатия кнопки ?Пожалуйста, играйте на jsfiddle , где вы уже можете видеть одно дерево, и я хочу, чтобы после нажатия кнопки отображалось другое дерево.Я следую за деревом, а не за текстом.

Я думаю, что мне нужно перезагрузить или обновить дерево после того, как я поместил jstree div в html.

Answer 1

tree2 не был создан в первую очередь, так как <div id="tree2"> не было там, когда вы вызываете '$ ("# tree2"). Jstree ".

Поэтому, когда вы нажимаете кнопку, первое дерево корректно обновляется, но tree2 не отображается по вышеуказанной причине.

При нажатой кнопке вам нужно воссоздать tree2, вызвав '$ ("# tree2"). Jstree ", или вы можете просто скрыть <div id="tree2"> при вызове $("#tree2").jstree.Я только что обновил вашу скрипку (http://jsfiddle.net/fmn6g/10/), чтобы вы могли попробовать.

Answer 2

Чтобы это произошло при нажатии кнопки, просто сделайте это:

<script type="text/javascript">
$(document).ready(function() {
$('#button-id').click(function() {
 $("#tree").jstree("loaded");  
 $("#tree").jstree("refresh"); 
});
});
</script>

Не забудьте изменить button-id на фактическое id кнопки.

Надеюсь, это поможет.