Question

用户应选择产品，并在指定的div <div id="display"></div>中显示更多信息。点击的元素.thumbnail及其子元素html出现在控制台中，但它不会加载到#display中。代码的第一部分正常工作，将所有产品加载到页面中形成.JSON文件。

HTML

<div class="container">
    <div class="row md-btm-padding">
        <div class="sm-btm-padding col-md-4 col-lg-4 col-lg-4">
            <div class="cat-section light-grey-border sm-padding">
                <div id="display"></div>
            </div>                          
        </div>

        <div class="cat-group">
           <div id="content"></div>
        </div>
    </div>
</div>  <!--container end-->

的jQuery

$(function(){

function loadProducts() {                    
    $.getJSON('products.json')              
    .done( function(data){                      
        products = data.products;
        renderProducts();
    }).fail( function() {                       
        $('#content').html('Sorry! We could not load our products at the moment. Try again later!');
    });
}

loadProducts();                      

function renderProducts() {

    var newContent = '';                               // Build up timetable by
    for (var i = 0; i < products.length; i++) {      // looping through events
        newContent += '<div class="col-lg-3 col-md-4 col-xs-6">';
        newContent += '<a class="thumbnail">';
        newContent += '<h4>SKU: <span>' + products[i].product + '</span></h4>';
        newContent += '<img class="img-responsive" src="' + products[i].img + '">';
        newContent += '</a>';
        newContent += '</div>';
    }

    $('#content').html(newContent);
}

//DISPLAY PRODUCT

$('#content').on('click', 'a.thumbnail', function(e) { 
     e.preventDefault();                                     
     var fragment = this;     
     console.log(this);                          


  $('#display').load(fragment);                           

  $('a.current').removeClass('current');       
  $(this).addClass('current');
});

}）;

Answer 1

您正在调用load

$('#display').load(fragment);

带有一个指向你点击的achor的片段。 load方法期望url字符串作为参数，而不是对DOM节点的引用。

因此，如果您想要显示内容，您需要.html()或者如果您需要获取更多详细信息，则需要引用要获取的网址。

$('#display').html(fragment.innerHTML);     
//OR
$('#display').html($(fragment).html());

Answer 2

load()期望字符串url作为第一个参数。您正试图传递this。

目前还不清楚您的意图是什么，如果您的json中有可用的网址，则将href添加到您的html字符串并更改为

var fragment = this.href;

Ajax .load方法不会加载内容

2 个答案: