Question

我有一个基于Jquery的提交按钮。

我提交以下代码。

<script>
$(document).ready(function(){
    var $myForm = $('.flag-post-form')
    $myForm.submit(function(event){
        event.preventDefault()
        var $formData = $(this).serialize()
        var $thisURL = $myForm.attr('data-url') || window.location.href // or set your own url
        $.ajax({
            method: "POST",
            url: $thisURL,
            data: $formData,
            success: handleFormSuccess,
            error: handleFormError,
        })
    })

    function handleFormSuccess(data, textStatus, jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
        //$myForm.reset(); // reset form data
         $('.report-post-btn').attr("disabled", true);
        if(data['message']){
        $( ".modal-errors").html("<h3 class='text-center text-success'>"+data['message']+"</h3>")}
        else{
          $( ".modal-errors").html("<h3 class='text-center text-success'>"+"Successfully reported post"+"</h3>")
        }
    }

    function handleFormError(jqXHR, textStatus, errorThrown){
        console.log(jqXHR)
        console.log(textStatus)
        console.log(errorThrown)
        $( ".modal-errors").html("<h3 class='text-center text-danger'>Unable to report post. Try again!</h3>")
    }
})
</script>

从外部URL动态加载的bootstrap模式中的以下代码。

<form data-url="/forum/flag_post/0838024b-f210-4f4d-ac53-fd4ade12d533" method="POST" id="flag-post-form" class="flag-post-form form" action="."><input name="csrfmiddlewaretoken" value="N7PNVNJ05lEq62cl4L9wRYkrmH8hPjuSBec1PVVNRaCXmJ4oZIjJ57EtlBiljV8s" type="hidden">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Enter reason below and report Post</h4>
            </div>
            <div class="modal-body">

                <input name="reason" maxlength="200" class="form-control" id="id_reason" type="text">
            </div>
            <div class="modal-errors"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <input class="btn btn-primary report-post-btn" value="Report Post" type="submit">
            </div>
        </div><!-- /.modal-content -->
    </form>

第一次加载模式时，使用Jquery和data-url中指定的URL进行提交。

然而，一旦我第二次加载模态，提交就会发生在加载模态的URL中，即加载模态的URL。

我无法弄清楚第二次发生了什么变化。

Answer 1

如果您的模态表单是动态加载的，则一旦模式被解除，事件绑定可能会丢失。在您提供的代码中，只有当文档的submit事件触发时，您才会绑定到表单的ready事件。考虑使用jQuery的.on()方法，绑定到始终存在于页面上的父节点。

$('body').on('submit', '.flag-post-form', function(event) {
   // ... your submit event handler code here ...
});

此处提供更多信息：http://api.jquery.com/on/

Jquery表单提交发生在父URL而不是模式指定的URL

1 个答案: