Question

我正在使用Materialise模态，我有一个表单和两个按钮，“验证”和“取消”。当我点击“验证”时，我希望在页面正文中生成一个div，但div会快速显示和消失。

接下来我的代码使用jquery：

$('#validation-btn').click(function(){
   $("#liste-questions").append("<div>hello world</div>");
});

HTML页面中的代码：

<body>
  <div class="container">
    <div id="liste-questions" class="liste-questions row">
    </div>
  </div>
  <div class="container-btn-bottom">
    <a href="#modal1" class="btn-floating btn-large waves-effect waves-light btn add"><i class="material-icons">add</i></a>
  </div>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content"> 
      <form class="col s12" id="formQuestions">
        <div class="row">
            <div class="input-field col s12">
                <input id="intitule" data-champ="intitule" name="intitule" type="text" class="validate requis">
                <label for="intitule">Intitulé <span class="required">*</span></label>
                <p class="help-block" id="help-intitule"></p>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input id="ref" type="text" class="validate">
                <label for="ref">Ref</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <textarea id="description" class="materialize-textarea" class="validate"></textarea>
                <label for="description">Description</label>
            </div>
        </div>
        <div class="row align-right">
            <button type="submit" id="validation-btn" class="modal-action modal-close waves-effect waves-light btn-large validation">Créer</button>
            <a href="#!" class="modal-action modal-close waves-effect waves-light btn-large cancel">Annuler</a>
        </div>
    </form>
</div>
</div>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/form-validation.js"></script>
<script>
$(document).ready(function(){
    $('.modal').modal();
});
</script>

感谢您的帮助！

Answer 1

我没有足够的评论代表，所以我写了一个＆＃34;答案＆＃34;。你的代码确实应该为你的身体添加一个div。最有可能的问题在于造型。尝试运行代码并通过浏览器开发工具手动设置CSS，直到它看起来像你想要的样子。然后只需在JS代码中添加样式。

Answer 2

你必须添加＆＃34; document.body＆＃34;而不是＆＃34; body＆＃34;并且应该删除引号

$('#validation-btn').click(function(){
   $(document.body).append("<div>hello world</div>");
});

在物化模式中执行按钮单击附加

2 个答案: