个人中心
gpt4 book ai didi

jquery - 为什么jstree中的动态节点不响应点击？

转载 作者：行者123 更新时间：2023-12-01 01:32:21 24 4
gpt4 key购买 nike

我有以下代码来显示带有ajax数据的jstree控件。

<小时/>

Home Controller 中数据的操作方法

 [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);
        }

View 模型

  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>
}

我已经将点击事件放在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>

最佳答案

你知道<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

关于jquery - 为什么jstree中的动态节点不响应点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35187092/

24 4 0
文章推荐： svn - 如何使用 DAV SVN 模块显示语言语法着色？
文章推荐： jquery - Bootstrap 轮播带居中 div 和多个 div 显示
文章推荐： jquery - 您应该如何在 Chrome 浏览器上利用即将弃用的方法来处理 jQuery？
文章推荐： jquery - IE 11错误: Object doesn't support property or method 'replace'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com