Question

我正在使用jQuery附加一個帶有自動對焦功能的HTML按鈕。但是， 自動對焦功能不起作用。我已經厭倦了使用jQuery和CSS來關注這個問題。看起來他們是與加載的HTML和附加的HTML斷開連接，但我沒有找到有關該主題的好資源。

var modal = " \ 
<div id='disable-modal' class='modalDialog'> \ 
    <div id='modal-container'> \ 
     <div id='modal-banner'> \ 
     <a href='#close' title='Close' class='close'>X</a> \ 
     </div> \ 
     <h1>Are you sure you want to restore<br>H's homepage?</h1> \ 
     <button is='x-disable-extension-button' class='yes-button'>Yes</button> \ 
     <button href='#close' class='no-button' autofocus >No</button> \ 

    </div> \ 
</div>"; 
$('body').append(modal); 

Answer 1

您在上面的代碼中有一個額外的換行符，導致它無法執行。需要刪除最後一個按鈕和關閉div之間的界限。如果你刪除它，它運行良好。

var modal = " \ 
 
<div id='disable-modal' class='modalDialog'> \ 
 
    <div id='modal-container'> \ 
 
     <div id='modal-banner'> \ 
 
     <a href='#close' title='Close' class='close'>X</a> \ 
 
     </div> \ 
 
     <h1>Are you sure you want to restore<br>H's homepage?</h1> \ 
 
     <button is='x-disable-extension-button' class='yes-button'>Yes</button> \ 
 
     <button href='#close' class='no-button' autofocus >No</button> \ 
 
    </div> \ 
 
</div>"; 
 
$('body').append(modal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

如果這只是一個錯字，比也許你可以做手工。

$(modal).appendTo("body").find("[autofocus]").focus(); 

Answer 2

@tymeJV是正確答案......

var modal = "<div id='disable-modal' class='modalDialog'> " 
    + "<div id='modal-container'> " 
    + "<div id='modal-banner'> " 
     + "<a href='#close' title='Close' class='close'>X</a>" 
     + "</div> " 
     + "<h1>Are you sure you want to restore<br>H's homepage?</h1> " 
     + "<button is='x-disable-extension-button' class='yes-button'>Yes</button> " 
     + "<button href='#close' class='no-button' autofocus >No</button> " 
    + "</div>" 
+ "</div>"; 
$('body').append(modal); 
$('#close').focus(); 

Answer 3

所有的瀏覽器不支持 「自動對焦」 e.g IE10不但是Chrome或Firefox支持 「自動對焦」。如果模式字符串格式正確，您的代碼可以在Chrome或FireFox中完美工作。請在其他瀏覽器中測試！