Jquery 在 Document.ready() 上获取 JSON

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

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

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

Answer 2

在定义问题中显示的事件处理程序后，您可以在集合的第一个元素上触发点击事件

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

Jquery 在 Document.ready() 上获取 JSON

Jquery getJSON on Document.ready()

jquery

json

dom

load