添加HTML与HTML行为

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

所有浏览器都不支持自动对焦，例如IE10不支持，但Chrome或FireFox支持自动对焦。如果模态字符串格式正确，您的代码在Chrome或FireFox中可以完美地工作。请在其他浏览器中测试!

Answer 3

@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();