0

我创建了一个基于 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>
4

2 回答 2

1

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

调用$('.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);
    });
});
于 2013-10-13T06:14:11.367 回答
0

改变

$(astuff).click(function()

至

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

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

于 2013-10-13T06:28:25.140 回答