執行追加按鈕點擊實現模態

我正在使用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>

感謝您的幫助！

來源

2017-05-23 maxg

我沒有足夠的代表評論，所以我寫了一個「答案」。你的代碼應該確實附加一個div給你的身體。這個問題很可能出在造型上。嘗試運行你的代碼，並通過你的瀏覽器開發工具設置CSS manualy，直到它看起來像你想要的樣子。然後，只需在JS代碼中添加樣式。

來源

2017-05-23 08:24:52 VTodorov

謝謝蜉沒有添加任何CSS呢！ – maxg

您必須添加「document.body的」，而不是「身體」和引號應該被刪除

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

來源

2017-05-23 08:25:04

謝謝，但它不能解決問題。我試圖插入div與其他股利與ID，但問題仍然存在 – maxg

你可以發佈代碼 –

你想在表單提交之前將div元素添加到表單嗎？ –

執行追加按鈕點擊實現模態

回答

相關問題