如果父元素没有子元素，则解除点击事件绑定。

Question

如果父元素没有子元素，则解除点击事件绑定。

3

这是我的XML文件：-

<root>
<child1 entity_id = "1" value= "Asia">
    <child2 entity_id = "2" value = "india">
        <child3 entity_id = "3" value = "Gujarat">
            <child5 entity_id = "5" value ="Rajkot"></child5>
        </child3>
        <child4 entity_id = "4" value = "Rajshthan">
            <child6 entity_id = "6" value = "Ajmer"></child6>
        </child4>
    </child2>
</child1>
</root>

这是我的代码：

<script>
data = false;


$(document).ready(function() {
    $("li").live("click", function(event) {
    /*if (event.target.id === '9426') {
        //$(this).unbind('click');
        alert('this is last !!')
        */
    $("li").hide();
        event.cancelBubble = true;
        loadChild($(this).attr("id"), event);
        return false;
    })
});

function loadChild(id) {
    var obj = $("#" + id);

    if(obj.data("loaded") == null) {
        ul = "<d>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";
        $(data).find(path).children().each(function(){
             var value_text = $(this).attr('value');
             var id = $(this).attr('entity_id');
             ul += "<li id='" + id + "'>" + value_text + "</li>";
         });
         ul += "</d>";

         $("#" + id).before(ul);
         obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        obj.data("loaded", null);
    }
}

 $(function() {
     $('#1').click(function() {
     $(this).hide();
      $.ajax({
             type: "GET",
             url: "final.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                loadChild("0");
                $(xml).find('child1').each(function(){
                var value_text = $(this).attr('value');
                var id = $(this).attr('entity_id');
                $("<li id='" + id + "'></li>")
                             .html(value_text)
                             .appendTo('#firstLevelChild');
                             $(this).unbind('click');

        });       //close each(      
    }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <div id="1">
         <span  id='update-target'>Click here to load value</span>
         <ol id="0"></ol>
       </div>
    <div id="firstLevelChild">
        <ol id="0"></ol>
        </div>
        </p>
</body>
</html>

使用这段代码，当我点击任何一个值时，它应该被隐藏。
但是如果最后一个子元素没有子元素，则不会被隐藏
也就是说，最后一个子元素上没有点击事件的效果...
感谢大家的帮助...

- user2017104

3

你的代码在哪里？原文没有意义。 - Marc

请创建一个 jsfiddle，我们从那段代码继续 :) - fedmich

我添加了我的代码，请检查... - user2017104

1

请添加您的HTML代码... - ATOzTOA

嘿，杰克，欢迎来到SO。请访问此页面http://jsfiddle.net/，我们需要您的HTML代码。 - fedmich

显示剩余3条评论

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pragnesh Chauhan · Answer 1

试试这个

演示

$(document).ready(function() {
  $("ul").live("click", function(event) {
    if($(this).children().size() > 1){
      $(this).find('li').first().hide();
      event.cancelBubble = true;
      loadChild($(this).attr("id"), event);
      return false;
    }    
 });
});

<ul>
   <li>Asia</li>
   <ul>
       <li>India</li>
       <ul>
          <li>Gujarat</li>
            <ul><li>Ahmedabad</li></ul>
       </ul>
  </ul>
</ul>

- ATOzTOA · Answer 2

您可以使用 length 来获取节点的子元素数量。

我已经清理了您的代码：

HTML

<body>
    <div id="loader">
        <span id='update-target'>Click here to load value</span>
    </div>

    <div id="firstLevelChild"></div>

    <div id="path"></div>
</body>

jQuery

data = false;

$(document).ready(function() {
    $('#loader').click(function() {
        $(this).hide();
        $.ajax({
            type: "GET",
            url: "./final.xml",
            dataType: "xml",
            success: function(xml) {
                data = xml;
                ul = $("<ul></ul>");
                $(xml).find('child1').each(function(){
                    var value_text = $(this).attr('value');
                    var id = $(this).attr('entity_id');
                    li = $("<li id='" + id + "'></li>");
                    li.html(value_text);

                    ul.append(li);
                    $(this).unbind('click');

                });       //close each(      
                ul.appendTo('#firstLevelChild');
            }
        }); //close $.ajax(
    }); //close click(

    $(document).on("click", "li", function(event) {
        event.stopPropagation();
        loadChild($(this).attr("id"), event);
        return false;
    });
});

function loadChild(id) {
    var obj = $("#firstLevelChild #" + id);

    if(obj.data("loaded") == null) {
        ul = "<ul>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            $("#path").text($("#path").text() + " - " + obj.text());
        }

        $(data).find(path).children().each(function(){
            var value_text = $(this).attr('value');
            var id = $(this).attr('entity_id');
            ul += "<li id='" + id + "'>" + value_text + "</li>";
        });

        ul += "</ul>";

        obj.after(ul);
        obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        obj.data("loaded", null);
    }
}

输出（两次点击后）

<div id="firstLevelChild">
    <ul>
        <li id="1" style="display: none;">Asia</li>
        <ul>
            <li id="2" style="display: none;">india</li>
            <ul>
                <li id="3">Gujarat</li>
                <li id="4">Rajshthan</li>
            </ul>
        </ul>
    </ul>
</div>
<div id="path"> - Asia - india</div>

- fedmich · Answer 3

看了你的代码...

首先给一些建议，目前的情况下，代码有点难读。

或许你可以考虑重新编写它？记住，少写多做。

重新编写并回答这个问题：

What should your code be doing?