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