jquery菜單 - 返回json數據

我從jquery腳本創建了一個菜單。腳本解析一個json響應文件並創建菜單。這樣可行。然而，菜單然後鏈接到一個URL。我不希望它鏈接到URL，而是從該URL獲取json響應並解析它。我試過了，無論如何，它總是在URL後面。以下是我迄今爲止：jquery菜單 - 返回json數據

jQuery的菜單創建（工作）：

<script> 
    $.getJSON('https://example.com/api/products/GetProductList/', function(data) { 
     var output = '<div class="panel panel-default">'; 
     for (var i in data.Categories) { 
      output += '<div class="panel-heading '+data.Categories[i].category_id +'"><a data-toggle="collapse" data-parent="#accordion" href="#' + data.Categories[i].category_id + '-products">'; 
      output += data.Categories[i].Category + '</a></div>'; 
      output += '<div id="' + data.Categories[i].category_id + '-products" class="panel-collapse collapse"><div class="panel-body">'; 
      for (var j in data.Categories[i].Products) { 
       output += '<li><a class="ProdLink" href="https://example.com/api/products/GetProductDetail/'+data.Categories[i].Products[j].product_id+'">'+data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].coins+' coins</a></li>'; 
      } 
      output += "</div></div>"; 
     } 
     output += "</div>"; 

     document.getElementById("accordion").innerHTML = output; 
    }); 
</script>

這將創建一個項目的菜單，如本

<a class="ProdLink" href="https://example.com/api/products/GetProductDetail/2">Test Item</a>

從這個URL解析數據我試過了：

 <script> 
$('#accordion').on('click','a.ProdLink',function(event) { 
    event.preventDefault(); 
    var url = $(this).attr("href"); 

    $.getJSON(url, function(data) { 
     var output = '<div>'; 
     for (var i in data) { 
      output += data[i].full_description; 
     } 
     output += "</div>"; 

     document.getElementById("itemdata").innerHTML = output; 
    });}); 

</script>

但是這不起作用。任何洞察力將不勝感激。

來源

2015-06-30 Merlin7591

這段摘錄似乎缺少一個右括號和括號'}）;'在關閉''標記之前。這是在實際的代碼？ – cloudworks

這是我在這裏的拼寫錯誤，實際的代碼是正確的。 – Merlin7591

您正在動態添加鏈接，所以請使用event delegation來處理動態元素上的事件，這裏a.ProdLink。

$('#accordion').on('click','a.ProdLink',function(event){ 
    ... 
});

此外，該行建議ProdLink是id，將其更改爲class噸避免重複的ID

output += '<li><a id="ProdLink" ...

而作爲cloudworks points out點擊功能應與易paranthesis關閉。

來源

2015-06-30 04:54:11

我試過這個，但它仍然轉發到「https://example.com/api/products/GetProductDetail/2」，而不是執行腳本。 – Merlin7591

你確定'ProdLink'是類屬性嗎？ –

是更改了id =「ProdLink」到class =「ProdLink」 – Merlin7591

jquery菜單 - 返回json數據

回答

相關問題