JQuery .html() 不工作

Question

我正在使用 Onsen UI + JQuery and .html() function is not working, see: https://jsfiddle.net/w8904ztc/1/

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Clone</div>
    </ons-toolbar>

    <ons-tabbar swipeable position="auto">
      <ons-tab page="tab1.html" label="Home" icon="ion-home, material:md-home" active>
      </ons-tab>
      <ons-tab page="tab2.html" label="Settings" icon="md-settings">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <template id="tab1.html">
    <ons-page id="Tab1">
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </template>

  <template id="tab2.html">
    <ons-page id="Tab2">
      <div class="center" id="usernamespan"></div>
      <p style="text-align: center;">
        <ons-button id="logout" name="logout" onclick="logout();">Logout</ons-button>
      </p>
    </ons-page>
  </template>
  <script type="text/javascript" src="cordova.js"></script>
  <script>
    function logout() {
      window.localStorage.clear();
      window.location.href = "index.html";
    }
    var username = localStorage.username;
    ons.notification.toast({
      message: 'Willkommen ' + username,
      timeout: 4000
    });

    $('usernamespan').html("Hallo Welt" + username);

  </script>
</body>

同样简单 JavaScript 不起作用，已经尝试过 .getElementById()

window.document.getElementById("#usernamespan").innerHTML = "Something";

returns => 未捕获类型错误：无法设置属性 'innerHTML' 为 null

有什么想法吗？

Answer 1

您需要将目标 ID 指定为 #IDOFDIV 或者如果它是 class .CLASSOFID。您还需要告诉 jquery 等待页面完成加载，然后再尝试找到它并向其添加 html，因为它可能还不在页面上。

这是使用 $(document).ready() 调用完成的，然后传递一个函数，其中包含您希望在页面加载完成后执行的代码。

  $(document).ready(function(){
   function logout() {
      window.localStorage.clear();
      window.location.href = "index.html";
    }
    var username = localStorage.username;
    ons.notification.toast({
      message: 'Willkommen ' + username,
      timeout: 4000
    });

    $('#usernamespan').html("Hallo Welt" + username);
  })

JQuery .html() 不工作

JQuery .html() not working

javascript

jquery

cordova

onsen-ui

phonegap