Question

我已经查看了之前的一些问题，我认为我已经验证了基本的问题＆＃39;事物（提交正确类型的按钮，在表单中等），但我仍然无法触发submitHandler。

表单正在根据需要进行验证，但在提交时，它不会触发submitHandler中的ajax调用

表格元素：

<div id="view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">
                    Add New Version
                </h4>
            </div>

            <form method="post" class="form-horizontal validate_form" id="ajaxform" enctype="multipart/form-data">
                <div class="modal-body">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Version Number</label>
                        <div class="col-sm-10">
                            <select class="form-control required" name="version_number">
                                <option value="">Select A Version...</option>
                                '.writeSelectOptions('versions', 'id', 'version_number', 'launch_date', 'DESC', array(), $_GET['version_id']).'
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Sort Order</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control required" name="sort_order" id="sort_order">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Change Details</label>
                        <div class="col-sm-10">
                            <textarea class="ckeditor" name="editor">Help Text</textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <input type="hidden" name="form_type" value="add_change" />
                    <input type="submit" class="btn btn-primary" id="ajaxsubmit" value="Submit" />&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

脚本：

<script>
    $(document).on('click', '#add_new_associated_change', function(e){
        e.preventDefault();
        $('#view-modal').modal('show');
    });

    $('button#ajaxsubmit').click(function(){
        $('#ajaxform').validate({
            ignore: 'hidden',
            submitHandler: function(form) {
                $.ajax({
                    type: 'POST',
                    url: 'scripts/submit_new_associated_change.php',
                    data: $('#ajaxform').serialize(),
                    success: function(msg){
                        $('#view-modal').modal('hide');
                        $('#versions').html(msg);
                        $('#status').html('<div class=\"alert alert-success alert-dismissable\"><button aria-hidden=\"true\" data-dismiss=\"alert\" class=\"close\" type=\"button\">&times;</button>Version added as requested.</div>');
                        //alert(msg);
                    },
                    error: function(xhr, textStatus, errorThrown){
                        console.log('failure'+xhr.responseText);
                    }
                });
            }
        });
        return false;
    });

    ClassicEditor
        .create( document.querySelector( ".ckeditor" ) )
        .then(
        editor => {
        console.log( editor );
    }
    )
    .catch(
        error => {
        console.error( error );
    }
    );
</script>

作为参考，＆＃39;版本＆＃39;和＆＃39;状态＆＃39;元素，是页面另一部分上的div，用于在ajax提交时更新内容。

Answer 1

在你的html中，它被定义为输入，所以按钮#xxx不正确

改变你的

 $('button#ajaxsubmit').click(function(){

以下作品

 $('#ajaxsubmit').click(function(){
 $('input#ajaxsubmit').click(function(){
 $('input[id=ajaxsubmit]').click(function(){

jQuery验证submitHandler没有触发

1 个答案: