javascript - Jquery菜单-返回json数据

Question

我已经从 jquery 脚本创建了一个菜单。该脚本解析 json 响应文件并创建菜单。这样可行。但是，菜单会链接到一个 URL。我不希望它链接到 URL，而是从该 URL 获取 json 响应并解析它。我已经尝试过，无论如何，它总是遵循 URL。这是我到目前为止所拥有的:

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>

但这不起作用。任何见解将不胜感激。

Answer 1

您正在动态附加链接，因此请使用 event delegation 处理动态元素上的事件，此处为 a.ProdLink。

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

此外，这一行表明ProdLink是id，将其更改为class以避免重复ID

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

如 cloudworks points out点击功能应该用 apt 括号关闭。