Set focus on element of other page imported with jQuery load method

StackOverflow https://stackoverflow.com/questions/23672206

  •  23-07-2023
  •  | 
  •  

문제

I have HeaderTemplate.html which includes a logout button and a navigation menu. This page will be imported from different pages using jQuery like this:

$(function(){
    $("#headermenu").load("HeaderTemplate.html");
});
.
.
</head>
<body>
<div id="headermenu"></div>

After login, user will be redirected to Welcome.html which includes only Header page HeaderTemplate.html. I wanna set focus on logout button only on this Welcome page so the javascript focus() can't be in the HeaderTemplate.html.

The problem is, as HeaderTemplate.html is imported, javascript can't find the logout button's id no matter where I put the code in the page. I even tried like this.

<div id="headermenu"></div>
<script>
    document.getElementById('logout-button').focus();
</script>

but still doesn't work. How can I make this work? Any help would be greatly appreciated. Thank you for your time.

도움이 되었습니까?

해결책

Use callback method of .load()

$("#headermenu").load("HeaderTemplate.html", function () {
    $('#logout-button').focus();
    //Or
    //document.getElementById('logout-button').focus();
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top