Jquery加载后更改内容

Question

我想在加载后更改某个元素的样式。 但是它给了我一个空指针。

function loadFriends() {
    $("#friendsContainer").load("friends.html");
}

selectCurrentSetting();

function selectCurrentSetting() {
    console.info("test");
    var selection = document.getElementById("friendsContainer").getAttribute("selection");
    console.info(selection);
    if (selection != null) {
        document.getElementById(selection).classList.add("selected");
    }
}

这是friends.html

中加载的内容

<div id="friends" class="container friends_container">
    <div class="container_content" id="container_content">
        <div class="option" id="#profile" onclick="">Profile <span class="fas fa-cog icon"></span></div>
        <div class="option" id="#settings" onclick="">Settings <span class="fas fa-cog icon"></span></div>
        </div>
    </div>
</div>

这就是它应该取代的东西

<div id="friendsContainer" selection="settings"></div>

代码selectCurrentSetting()应在加载后更改#settings中friends.html的样式。 但它得到一个空指针。

在需要的元素可用后，如何在selectCurrentSetting()中执行代码？

Answer 1

删除

中的＃

id="#settings"

或设置

selection="#settings"

因为您在标记中不需要＃来设置ID

Working demo

Answer 2

试试这个：）

   function loadFriends() {
      $("#friendsContainer").load("friends.html", function(responseTxt, statusTxt, xhr) {
          if (statusTxt == "success")
              selectCurrentSetting();
          if (statusTxt == "error")
              console.log("Error: " + xhr.status + ": " + xhr.statusText);
      });
  }