2013-04-23 69 views
1

工作正確的,這是我final.xml文件: -現場()點擊不javscaript

<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文件。
從xml文件中查找chil1屬性值。然後點擊它。點擊它顯示那裏的孩子喜歡: - 點擊Asia顯示有孩子。 樹明智的,如: -

Asia 
    India 

,並點擊India

Asia 
    India 
     Gujarat 
     Rajshthan 

,並點擊古吉拉特邦

Asia 
    India 
     Gujarat 
       Rajkot 
     Rajshthan 

現在我使用live()<span>
現在問題來追加點擊的價值是當我第一次點擊它的顯示範圍時。
但第二次點擊它們顯示有孩子。像這樣類型: -
亞洲 印度 古吉拉特邦 拉傑果德 Rajshthan 最後點擊價值拉傑果德所以在我的跨度顯示是這樣的類型: -
<div id="path"><span class="tagit-new">拉傑果德</span></div>
現在我點擊有父那麼它的顯示屏
<div id="path"><span class="tagit-new">古吉拉特邦拉傑科德</span></div>
作爲我的邏輯它的唯一顯示點擊文本。 Gujurat
爲什麼我得到這個porblem請回顧我的代碼,並幫我解決這個問題。
謝謝。

+0

你爲什麼這樣做'$(本).unbind(「點擊」);'還沒有被添加到一個XML節點上DOM呢? – 2013-04-23 09:32:11

+0

解除最後一個孩子...但不是這個問題... – 2013-04-23 09:49:41

+0

@Jack這裏是obj.append(ul)中的一些問題;這裏我使用obj。後(UL);那麼它的工作完美,但不會在第二次點擊時將列表最小化。 – 2013-04-23 10:27:24

回答

2

live()從jQuery 1.7開始已被棄用。你正在使用1.8.3。改爲使用on。請參閱this

根據其後繼者重寫.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+ 
+0

截至jQuery 1.7+ – 2013-04-23 09:23:30

+0

@ alex23你應該在這裏引用相關部分。因此,這是一個鏈接唯一的答案。在這裏不接受鏈接的答案。 – 2013-04-23 09:27:28

+0

我正在使用on()然後不附加值在我的'' – 2013-04-23 09:29:47