Question

我正在构建一种页面构建器，用户可以在其中向页面添加块，然后保存布局。我遇到了一个我无法理解的问题。我有一个动态添加到页面的表单，其中JavaScript包含文件输入，如下所示：

<form class="upload " action="" method="post">
    <input id="" type="file" class="fill" name="upload">
    <img src="/admin/img/default.png" alt="">
</form>

添加内容后，我调用以下函数添加事件侦听器。 $el对应于文件输入。

function changeListen($el){
    $el.addEventListener('change', function(){
        $el.parentElement.submit();
    });
    $el.parentElement.addEventListener('submit', function(e){
        e.preventDefault;
        // call Ajax request...
    });
}

我希望能够在选择图像时使用Ajax请求更新数据库，因此我在change事件中提交表单，到目前为止一直很好，但出于某种原因，{{1}不考虑事件，页面重新加载。任何解决方案或解决方案都很受欢迎，最好不是jQuery。

Answer 1

通过在HTML中使用onsubmit事件，您可以通过这种方式调用javascript函数并执行ajax调用。

Javascript示例

<script>
function doSomething() {
    alert('Hello, World');
    return false;
}
</script>

HTML示例

<form onsubmit="return doSomething();">
    <input type="submit" value="Submit" />
</form>

编辑：在javascript中返回false，因此点击后?不会出现在URI中

使用JavaScript动态添加内容捕获提交事件

1 个答案: