使用HTML行为添加HTML

Question

我正在附加，使用jQuery，一个具有自动聚焦功能的超文本标记语言按钮。但是，自动对焦功能不起作用。我已经厌倦了使用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

并非所有浏览器都支持“自动聚焦”，例如IE10不支持，但Chrome或FireFox支持“自动聚焦”。如果模式字符串的格式正确，你的代码就可以在Chrome或FireFox中完美运行。请在其他浏览器中测试！