JQuery 不会从模态触发动作

Question

我在 Bootstrap 模态 window

中有以下表格

            <form id="formCsv" class="row gy-2" enctype="multipart/form-data">
              <div class="col-md-5 ">
                <input class="form-control" type="file" id="file" name="file">    
              </div>
                <div class="col-md-3">
                <button type="submit" id="csvBtn"class="btn btn-primary" name="something"> Upload </button>
              </div>
              <div id="loading" class="clearfix col-md-2">
                <div class="spinner-border text-primary float-right" role="status"></div>
              </div>
              <div class="col-md-2">
                <button type="button" id="export-btn" class="btn btn-primary" disabled>Export CSV</button>
              </div>
            </form>

JQuery 文件

console.log("Works");

$(document).ready( function() {
    // Submit form data via Ajax
    $("#formCsv").on('submit', function(e)
    {
        alert("test");
        e.preventDefault();
        var form_data = new FormData($(this)[0]); 

        $.ajax({
            type: 'POST',
            url: 'src/positionen/getCsvData.php',
            data: form_data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(response)
            {
                console.log(response);
                var json = JSON.parse(response);                
                addToTable(json);
            },
        });
    });
});

console.log() 有效。其中的 alert() 没有被触发，也没有抛出任何错误。

知道为什么会这样吗？

如果没有模态形式的表单，它就可以正常工作。

Answer 1

我看到问题了。

表单稍后加载到 DOM 您需要将侦听器更改为 $(document).on('submit', '#formCsv', function() {//your code})

这样 Jquery 也将收听稍后通过 ajax 调用添加的内容。

JQuery 不会从模态触发动作

JQuery won't fire an action from modal

html

javascript

php

ajax

jquery