Question

我需要提示如何解决此问题，这是我的jquery脚本调用JSON

$('#myTabs a').click(function () {
    var jsonURL = $(this).attr('data-link');
    var targetURL = $(this).attr('href');

      $.getJSON(jsonURL,
        function(data) {
           $(targetURL).html('<p> Name: ' + data.item.name + '</p>' + '<p>Details : ' + data.item.details + '</p>' + '<p> Composition: ' + data.item.composition + '</p>' + '<p> Sex: ' + data.item.modelDetails + '</p>' );
         });
       });

虽然这是HTML

<!-- Navigation Buttons -->
        <div class="col-md-3">
          <ul class="nav nav-pills nav-stacked" id="myTabs">
            <li class="active"><a id="test1" data-link="https://api.myjson.com/bins/1rzuh" href="#one">One</a></li>
            <li><a id="test2" data-link="https://api.myjson.com/bins/4a8ax" href="#two">Two</a></li>
          </ul>
        </div>

        <!-- Content -->
        <div class="col-md-9">
          <div class="tab-content">
            <div data-json="element-1" class="tab-pane active" id="one">wewe1</div>
            <div data-json="element-2" class="tab-pane" id="two">wewe2</div>
          </div>
        </div>

问题是当DOM完成加载时，我需要第一个JSON内容出现在目标div中，现在我看到的只是一个空白div，因为我需要先在内容正确显示之前单击按钮。

我在开发中真的很棒，请耐心等待:) 大家好

Answer 1

在定义问题

中显示的事件处理程序后，您可以在集合的第一个元素上触发click事件

$('#myTabs a').first().click();

Answer 2

如果您将javascript放在document.ready中，那么它将自动在加载时运行：

$(document).ready(function(){
    // do stuff on page load
});

Document.ready（）上的Jquery getJSON

2 个答案: