I'；我用javascript在一个模式中创建一个表单，但它不'；我不能使用ajax

我有一个表格的问题，我已经两天没有解决了。请帮忙：）

这是触发按钮

<button type="button" id="buttonid" data-toggle="modal" data-target="#myModal">Test</button>

---

表单不能与ajax配合使用，这种用法没有错误。但是如果我直接写这个表单（没有javascript），它就可以工作了。顺便说一句，Jquery文件包含在标题中。

如果您遇到错误，应该在此处发布错误详细信息。没有错误：/。当我直接用html和javascript编写所有表单代码时，一切正常。但这不是，并且控制台上没有错误

<script type="text/javascript">

document.getElementById("buttonid").addEventListener("click", function(){
$("#result").html("<div id='myModal' class='modal fade' role='dialog'> <div 
class='modal-dialog'><div class='modal-content'><div class='modal-header'> 
<button type='button' class='close' data-dismiss='modal'>&times;</button> <h4 
class='modal-title'>Reservation Form</h4></div><div class='modal-body'><form 
action='javascript:;' method='POST' id='reservationFormId'><div><label 
for='email'>Email Address:</label><input type='email' class='required' 
name='email' placeholder='Email Address'></div><div ><label 
for='phone'>Phone:</label><input type='text' class=' required' name='phone' 
placeholder='Phone Number'></div><div class='row'><div><input type='submit' 
id='roomButton' name='roomButton' value='Send'></input></div></div>  <div 
id='roomResult'></div></form></div></div></div></div>");

});                                                     
</script>

<div id="result"></div>

  var ajaxURL = "myUrl address"; 

  $("#roomButton").click(function(){ 
    var i = 0;
    $(".required").each(function(){
        if ($(this).val() == "") {
            $(this).css("border", "1px solid red");
            i++;
        }else{
            $(this).css("border", "1px solid #22560c");
        }
    });

    if (i == 0) {
                $("#roomResult").html('');
                // $("#send_message").hide();
                $.ajax({
                    type: "POST",
                    url: ajaxURL + 'mail?asd=test',
                    data: $("#reservationFormId").serialize(),
                    success: function(sonuc) {
                        $("#roomResult").html(sonuc);
                        $("#roomButton").show();
                    }
                });
    }
});