我有以下代码来显示带有ajax数据的jstree控件。
Home控制器
[HttpGet]
public JsonResult GetNodeData()
{
var tvdata = new List<NodeDataStructure>();
tvdata.Add(new NodeDataStructure { id = "student1", parent = "#", text = "Single root node", value = "10", @class = "parentNode" });
tvdata.Add(new NodeDataStructure { id = "student2", parent = "#", text = "Root Node with children", value = "10", @class = "parentNode" });
tvdata.Add(new NodeDataStructure { id = "student3", parent = "student2", text = "Query1", value = "answerQ1", @class = "cn1" });
tvdata.Add(new NodeDataStructure { id = "student4", parent = "student2", text = "Query2", value = "answerQ2", @class = "cn1" });
return Json(tvdata, JsonRequestBehavior.AllowGet);
}
视图模型
public class NodeDataStructure
{
public String id { get; set; }
public string @class { get; set; }
public string parent { get; set; }
public string text { get; set; }
public string value { get; set; }
}
Index.cshtml
<div id="Div_jstree"></div>
@section Scripts{
<script src="Scripts/jstree.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: 'Home/GetNodeData',
method: 'get',
dataType: 'json',
success: function (data) {
$(data).each(function (index, item) {
console.log("here");
});
$('#Div_jstree').jstree({
'core': {
'data': data
}
});
$(document).on('click', '.cn1', function () {
console.log('im here');
});
},
error: function (x,y,z) { }
});
});
</script>
}
我已将click事件放在ajax的成功部分但是点击不起作用，这里是什么问题以及我该如何解决？
Here is the generated html but since jstree is dynamic I don't see any use of this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/themes/base/all.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<link rel="stylesheet" href="Content/themes/default/style.min.css" />
<br><br><br><br>
<div id="Div_jstree"></div>
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="Scripts/jstree.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: 'Home/GetNodeData',
method: 'get',
dataType: 'json',
success: function (data) {
$(data).each(function (index, item) {
console.log("here");
});
$('#Div_jstree').jstree({
'core': {
'data': data
}
});
$(document).on('select_node.jstree', '.cn1', function () {
console.log('im here');
});
},
error: function (x, y, z) { console.log('error'); }
});
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"2cf16620b2de4718bed3c368cbe7f86b"}
</script>
<script type="text/javascript" src="http://localhost:48985/eae5ba43081c4bce98f0d05ef8143589/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
这是（#Div_jstree）生成的DOM
<div id="Div_jstree" class="jstree jstree-1 jstree-default" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="student4" aria-busy="false">
<ul class="jstree-container-ul jstree-children" role="group">
<li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="student1_anchor" id="student1" class="jstree-node jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="student1_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Single root node</a></li>
<li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="student2_anchor" aria-expanded="true" id="student2" class="jstree-node jstree-last jstree-open">
<i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="student2_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Root Node with children</a>
<ul role="group" class="jstree-children" style="">
<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="student3_anchor" id="student3" class="jstree-node jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="student3_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Query1</a></li>
<li role="treeitem" aria-selected="true" aria-level="2" aria-labelledby="student4_anchor" id="student4" class="jstree-node jstree-leaf jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor jstree-clicked" href="#" tabindex="-1" id="student4_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Query2</a></li>
</ul>
</li>
</ul>
</div>
答案 0 :(得分：1)
你知道<div id="Div_jstree"></div>是你的容器
如果您确定在获得ajax结果后，请致电
$('#Div_jstree').jstree({'core': {'data': data}});
肯定会触发容器DOM结构的更改。
你可以做的是，在调用jstree之后，执行
$('#Div_jstree').find('li').each(function(){
//apply a click listerner on each leaf <li> element that is found
//in #Div_jstree
if( $(this).find('ul').length <=0 ){
$(this).click(function(){
// your click handling logic
});
}
});
总而言之，它应该与此类似 节点1,3和4应该应用侦听器。
$(document).ready(function(){
var changesIntroducedToContainerAfterAjax = '<ul class="jstree-container-ul jstree-children" role="group"> <li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="student1_anchor" id="student1" class="jstree-node jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="student1_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Single root node</a></li> <li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="student2_anchor" aria-expanded="true" id="student2" class="jstree-node jstree-last jstree-open"> <i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="student2_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Root Node with children</a> <ul role="group" class="jstree-children" style=""> <li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="student3_anchor" id="student3" class="jstree-node jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="student3_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Query1</a></li> <li role="treeitem" aria-selected="true" aria-level="2" aria-labelledby="student4_anchor" id="student4" class="jstree-node jstree-leaf jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor jstree-clicked" href="#" tabindex="-1" id="student4_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Query2</a></li> </ul> </li> </ul>';
//simulate Ajax call
$('#Div_jstree').html(changesIntroducedToContainerAfterAjax);
//apply listeners to leaf nodes
$('#Div_jstree').find('li').each(function(){
if( $(this).find('.jstree-node').length <=0 ){
console.log( $(this).prop('id') );
$(this).click(function(){
alert( $(this).prop('id') + " clicked" );
});
}
});
});
在CodePen上查看它：http://codepen.io/anon/pen/vLzxpj
答案 1 :(得分：0)
{@ 1}}事件将在树元素上触发，因此在成功回调中将处理程序绑定到它的正确方法如下所示。 查看演示 - Fiddle：
select_node