Question

我已经创建了一个基于JSON数据的动态链接，我遇到的问题是，当我点击链接时，它没有加载与每个链接相关的信息。

例如，当我点击代数时，它应该加载id和作者信息。但目前它只适用于最后一个链接。

如何让它适用于每个链接，以便为每个链接加载？

这是我的代码：

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script>



var url= 'sample.json';
$.ajax({
    url: url,
    dataType: "jsonp",
    jsonpCallback: 'jsoncback',
    success: function(data) {
       console.log(data);
        //$('.bookname').empty();
        var html ='';
         $.each(data.class, function(key, value) {
            console.log(value.name+  " value name");
            console.log(value.desc +  " val desc");
           $('.bookname').empty();
            html+= '<div class="books" id="authorInfo-'+key+'">';
            html+=  '<a href="#" >'+value.name+ key+'</a>';
            html+=  '</div>';   

           $(".bookname").append(html);
            var astuff = "#authorInfo-"+key+" a";
            console.log(value.desc +  " val desc");
            $(astuff).click(function() {
             var text = $(this).text();
             console.log(text+  " text");
                var bookdetails =''
                 $("#contentbox").empty();                          
                    $.each(value.desc, function(k,v) {
                       console.log(v.id +"-");
                       console.log(v.author +"<br>");
                        bookdetails+= v.id +' <br> ' 
                        bookdetails+= v.author + '<br>';

                    }); 
                  $("#contentbox").append(bookdetails);         
            });
          });

    },
    error: function(e) {
       console.log("error " +e.message);
    }
});



        </script>
    </head>
    <body>
        <div id="container">
        <div class="bookname">

        </div>
        <div id="contentbox">

        </div>
        <div class="clear"></div>
</div>

    </body>
</html>

Answer 1

问题是你正在更新循环中元素bookname的内部html，这将导致先前添加的处理程序从子元素中删除。

循环中的调用$('.bookname').empty();和$(".bookname").append(html);是罪魁祸首。你可以像这样重写程序

jQuery(function ($) {
    var url = 'sample.json';
    $.ajax({
        url: url,
        dataType: "jsonp",
        jsonpCallback: 'jsoncback',
        success: function (data) {
            var $bookname = $('.bookname').empty();
            $.each(data.class, function (key, value) {
                var html = '<div class="books author-info" id="authorInfo-' + key + '">';
                html += '<a href="#" class="title">' + value.name + key + '</a>';
                html += '</div>';
                $(html).appendTo($bookname).data('book', value);
            });
        },
        error: function (e) {
            console.log("error " + e.message);
        }
    });

    var $contentbox = $("#contentbox");
    $('.bookname').on('click', '.author-info .title', function (e) {
        e.preventDefault();

        var value = $(this).closest('.books').data('book');

        var text = $(this).text();
        console.log(text + " text");
        var bookdetails = '';
        $.each(value.desc, function (k, v) {
            console.log(v.id + "-");
            console.log(v.author + "<br>");
            bookdetails += v.id + ' <br> ';
            bookdetails += v.author + '<br>';

        });
        $contentbox.html(bookdetails);
    });
});

Answer 2

更改

$(astuff).click(function()

到

$(document).on("click", "#astuff", function()

我认为“astuff”是一个ID而你忘记了原始选择器中的数字符号和引号。 jQuery“click”侦听器仅侦听在初始页面加载期间呈现的元素上的事件。您想使用“on”侦听器，它将查找当前在DOM中的元素上的事件。

如何在onclick上加载与每个链接相关的JSON数据？

2 个答案: