1

这是我的 final.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>

这是我的 html 代码：-

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

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

    <div id="path"><span class="tagit-new"></span></div>
</body>

这是我的脚本：-

<script>
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;
    });
});
$("#firstLevelChild ul li").live("click", function(){
    $("#path .tagit-new").html($(this).html());
    a = $("<a class=\"close\">x</a>\n");
    $(".tagit-new").append(a);

$(".close").click(function(){
    $(".tagit-new").html('');
});
});
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").show();
        }

        $(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.append(ul);
       obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        obj.data("loaded", null);
    }
}
</script>

这是我使用的 js 文件：-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

在这里，我尝试从 xml 文件中获取 Region。
从 xml 文件中查找 chil1 属性值。然后设置点击它。单击它显示那里的孩子喜欢：- 单击Asia显示那里的孩子。明智的树，例如：-

Asia 
    India

然后点击India

Asia 
    India
         Gujarat
         Rajshthan

然后点击古吉拉特邦

Asia
    India
         Gujarat
                Rajkot
         Rajshthan

现在我live()用来在现在的问题中附加点击的值<span>
是当我第一次点击它时，它在 span 中正确显示。
但第二次点击它们显示那里的孩子。类似这种类型的东西：-
亚洲印度古吉拉特邦拉杰科特拉杰什坦最后点击的值是拉杰科特，所以在我的跨度显示类似这种类型的东西：-
<div id="path"><span class="tagit-new">拉杰科特</span></div>
现在我点击那里的父然后它显示
<div id="path"><span class="tagit-new">古吉拉特拉杰</span></div>
科特 作为我的逻辑它唯一显示点击的文本。Gujurat
为什么我会遇到这个问题，请查看我的代码并帮助我解决这个问题。
谢谢。

4

1 回答 1

2

live()自 jQuery 1.7 起已被弃用。您使用的是 1.8.3。改为使用on。看到这个

根据其继承者重写 .live() 方法很简单；这些是对所有三种事件附件方法进行等效调用的模板：

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
于 2013-04-23T09:21:34.927 回答