Question

这是我的Codepenlink

我创建了一个按钮，用于在布局中的某个区域后面显示html代码。

当我想编辑textarea中的代码时，例如更改类或添加更多id ...然后我按提交将新的HTML代码更新回到该区域但它没有工作和布局也变为纯HTML代码。

所以我不知道是否可以在不重新加载页面的情况下将新的HTML代码提交回布局，我正在考虑应用表单并使用AJAX但是到目前为止仍然不知道如何用它。

Answer 1

请试试这个：

//generate html
$(document).on('click', '.btn-success', function() {
  var target = $('.example-form').find('form');
  $('.bs-example-modal-lg').on('shown.bs.modal', function(e) {
    var htmlString = $(target).html();
    $("#codeContainer").val(htmlString);
  });
});

//apply new html to layout
$("body").on('click', ".modal.bs-example-modal-lg .btn-primary", function() {
  var htmlcode = $("#codeContainer").val();
  $(".example-form form").html(htmlcode);
});

.btn-html {
  margin: 10px 0;
}

.example-form {
  padding: 10px;
  border: 1px solid #343434;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="btn-html">
        <button class="btn btn-success" data-toggle="modal" data-target="#myModal">Show HTML</button>
      </div>
      <div class="example-form">
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Show HTML code behind layout</h4>
      </div>
      <div class="modal-body">
        <textarea id="codeContainer" rows="25" style="width: 100%;"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 2

问题是，当您尝试更改页面时，您已经加载了页面，因此您需要做的是将标记保存到本地存储或数据库并重新加载页面

...或

如果您只允许在页面标记的某个部分内进行更改，则可以使用jquery来应用更改。

你的

的jquery

//apply new html to layout
$(".btn-primary").click(function () {
  var htmlcode = $("#codeContainer").text();
  $(".example-form form").text(htmlcode);
});

看起来你正是这样做的正确方法，但是，你使用了错误的方法。

将其更改为：

//apply new html to layout
$(".btn-primary").click(function () {
  var htmlcode = $("#codeContainer").text();
  $(".example-form form").html(htmlcode);
});

将新HTML代码应用于布局

2 个答案: