Javascript 如何加载与每个链接onclick关联的JSON数据？_Javascript_Jquery_Json

Javascript 如何加载与每个链接onclick关联的JSON数据？

javascript jquery json

Javascript 如何加载与每个链接onclick关联的JSON数据？,javascript,jquery,json,Javascript,Jquery,Json,我已经基于JSON数据创建了一个动态链接，当我点击链接时，我遇到的问题是它没有加载每个链接的相关信息例如，当我点击代数时，它应该加载id和作者信息。但目前它只适用于最后一个链接我如何使它为每个链接工作，以便为每个链接加载下面是我的代码： <html> <head> <script type="text/javascript" src="jquery.js"></script> <script>

我已经基于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>


var url='sample.json'；
$.ajax({
url:url，
数据类型：“jsonp”，
jsonpCallback:'JSONCCack'，
成功：功能（数据）{
控制台日志（数据）；
//$（'.bookname'）.empty（）；
var html=''；
$.each（data.class、函数（键、值）{
console.log（value.name+“value name”）；
console.log（value.desc+“val desc”）；
$（'.bookname'）.empty（）；
html+=''；
html+=''；
html+=''；
$（“.bookname”）.append（html）；
var astuff=“#authorInfo-”+键+a”；
console.log（value.desc+“val desc”）；
$（astuff）。单击（函数（）{
var text=$（this.text（）；
控制台日志（文本+文本）；
var bookdetails=“”
$（“#contentbox”）.empty（）；
$.each（value.desc，函数（k，v）{
console.log（v.id+“-”）；
console.log（v.author+“
”）；
bookdetails+=v.id+'
'
bookdetails+=v.author+'
'；
}); 
$（“#contentbox”）。追加（书籍详细信息）；
});
});
},
错误：函数（e）{
console.log（“错误”+e.message）；
}
});

问题是您正在更新循环中元素

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);
    });
});

jQuery（函数（$）{
var url='sample.json'；
$.ajax({
url:url，
数据类型：“jsonp”，
jsonpCallback:'JSONCCack'，
成功：功能（数据）{
var$bookname=$（'.bookname'）.empty（）；
$.each（data.class、函数（键、值）{
var html=''；
html+=''；
html+=''；
$（html）.appendTo（$bookname）.data（'book'，value）；
});
},
错误：函数（e）{
console.log（“错误”+e.message）；
}
});
var$contentbox=$（“#contentbox”）；
$（'.bookname'）。on（'click'，'.author info.title'，函数（e）{
e、 预防默认值（）；
var值=$（this）.最近（'.books'）。数据（'book'）；
var text=$（this.text（）；
控制台日志（文本+文本）；
var bookdetails=''；
$.each（value.desc，函数（k，v）{
console.log（v.id+“-”）；
console.log（v.author+“
”）；
bookdetails+=v.id+'
'；
bookdetails+=v.author+'
'；
});
$contentbox.html（书籍详细信息）；
});
});
更改
$(astuff).click(function()

到
我假设“astuff”是一个ID，而您忘记了原始选择器中的数字符号和引号。jQuery“click”侦听器只侦听在初始页面加载期间呈现的元素上的事件。如果要使用“on”侦听器，它将查找DOM中当前元素的事件。谢谢。我正在尝试运行您的代码，但在“var html+=''”上出现语法错误；有什么我遗漏了吗？@user244394让我看看see@user244394你为什么不想做替补。。。怎么了
$(document).on("click", "#astuff", function()