使用 Javascript 插入 HTML 片段后，在 JQM 中将标题与按钮对齐答案

【问题标题】：Aligning Header with Button in JQM after inserting HTML snippet with Javascript使用 Javascript 插入 HTML 片段后，在 JQM 中将标题与按钮对齐
【发布时间】：2017-10-03 07:10:34
【问题描述】：

我正在尝试使用 Javascript 将标题注入页面 (JQM) 的标题。我还想启用订阅功能，所以我还需要通过 Javascript 插入按钮。但是，每当我注入它时，它就会变得一团糟。我希望按钮与标题对齐，并且我希望标题位于标题的中间。 Here's a picture to demonstrate how it looks right now

我希望它完美对齐，完全没有换行符（就像现在一样）

我使用这些行来插入按钮和标题（JS）：

                document.getElementById("forum_name").innerHTML = fName;
            document.getElementById("subscribe_btn").innerHTML = "&nbsp; <a href='#' class='ui-btn'>Unsubscribe</a>";

我在 HTML 文件中使用这些行：

        <div data-role="header"><span style="display:inline;" id="subscribe_btn"></span><center><div id="forum_name" style="display:inline-block"></div></center></div>

【问题讨论】：

如果您希望我们提供帮助，您需要发布复制屏幕截图中内容的代码。了解如何创建minimal reproducible example
@MichaelCoker 已编辑！

标签： javascript jquery html css jquery-mobile

【解决方案1】：

使用 JQM，您可以通过以下方式进行：

var subscribeText = "Subscribe", unsubscribeText = "Unsubscribe";

function changeSubscription() {
  var choiche = $('input[name=rg-subscription]:checked'),
    value = choiche.val(),
    label = choiche.parent().text();
  $("#toggleSubscription").toggleClass("ui-screen-hidden", value == "no-subscription");
  if (value == "no-subscription") {
    $("#toggleSubscription").text(subscribeText);
  }
  var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
  $("#" + pageId + " [data-role='header'] h1").text(label);
}

$(document).on("pagecreate", "#page-1", function(e) {
  $("input[name='rg-subscription']").change(changeSubscription);
  $("#toggleSubscription").on("vclick", function(e) {
    $(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText);
  });
  $("#injectButton").click(injectButton);
});

$(document).on("pagebeforeshow", "#page-1", function(e, ui) {
  changeSubscription();
});

function injectButton() {
  $("#toggleSubscription").off();
  var html = [
    '<button id="toggleSubscription" ',
    'class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all">',
    'Subscribe',
    '</button>'
  ].join("");
  $("#toggleSubscription").remove();
  $("#page-1 [data-role='header']").prepend(html).enhanceWithin();
  $("#toggleSubscription").on("vclick", function(e) {
    $(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText);
  });
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div id="page-1" data-role="page">
    <div data-role="header">
      <h1>Header</h1>
    </div>
    <div role="main" class="ui-content" id="page-1-content">

          <fieldset data-role="controlgroup" data-mini="true">
            <input name="rg-subscription" id="rc-subscription-0" value="no-subscription" checked="checked" type="radio">
            <label for="rc-subscription-0">no subscription</label>
            <input name="rg-subscription" id="rc-subscription-1" value="alt-binaries-mp3" type="radio">
            <label for="rc-subscription-1">alt.binaries.mp3</label>
            <input name="rg-subscription" id="rc-subscription-2" value="alt-binaries-linux" type="radio">
            <label for="rc-subscription-2">alt.binaries.linux</label>
            <input name="rg-subscription" id="rc-subscription-3" value="alt-binaries-games" type="radio">
            <label for="rc-subscription-3">alt.binaries.games</label>
          </fieldset>

        <button id="injectButton" class="ui-btn ui-btn-inline ui-mini ui-corner-all">Inject "Subscribe" Button</button>
    </div>
  </div>
</body>

</html>

【讨论】：