Question

使用Ajax，我在页面中加载了一个表单。在此表单中，还有文件输入，复选框和提交按钮。有了这个，我得到提交的表格：

$(WrapperDiv).on('click', SubmitButton, function(){...})

我收到表单提交。像这样我也可以更改复选框的checked属性，但不更改它的外观。并且文件输入不会打开文件对话框。那么这两个怎么做呢？

enter image description here

守则：

HTML：

<div class="form-outer add-outer" id="add-outer">
    <div class="add-inner" id="add-inner">

    </div>
</div>

ajax加载什么（Django）：

<form method="post" action="{% url 'wiki:add' typ %}">
    {% csrf_token %}
    <fieldset>
        <legend>{{ typ|capfirst }} hinzufügen</legend>
    <table class="table table-striped table-bordered">
        {{ form.as_table }}
    </table>
    </fieldset>

    <button type="submit" class="btn btn-default" id="form-btn">Senden</button>
</form>

使用Javascript：

$(document).ready(function(){
    $('.add-btn').on('click', function(){
        url = $(this).attr('data-url');
        $('#add-inner').load(url, function(form){
            $('#add-inner .datepicker').datepicker()
            $('#add-inner textarea').tinymce({
                theme: "modern",
                height: 100,
            })

            $('#add-inner').hide()
            $('#add-outer').fadeIn()
            $('#add-inner').slideDown()
            $('#add-inner').css('left', (($(window).width()-$('#add-inner').width())/2))
        })
    });
    $('.add-outer').on('click', function(){
        $('.add-outer .add-inner').slideUp('fast');
        tinyMCE.remove();
    })
    $('#add-inner').on('click', 'input[type=checkbox]', function(){
        console.log(this, 'click')
        $(this).attr("checked", !$(this).attr("checked"));
    })
    $('#add-inner').on('click', '#form-btn', function(){
        form = $('#add-inner form')
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form.serialize(),
            success: function(response){
                if(response == 1){
                    $('#add-inner').slideUp()
                    $('#add-outer').fadeOut()
                }

            }
        })
    });


    $(window).resize(function(){
        $('#add-inner').css('left', (($(window).width()-$('#add-inner').width())/2))
    });
})

Answer 1

该死。我发现了这个问题。内部形式的内部div被打包在一个外部div中，这个div可以从网站的另一部分重用。在另一个.js文件中，我这样做：

$('.form-outer').on('click', function(){
    $(this).fadeOut()
}).children().on('click', function(e) {
    return false;
});

这会导致问题，因为此脚本会阻止外部div的所有子事件。所以这对我来说非常愚蠢。我讨厌它。 ^ - ^

从.load（）复选框和文件输入无效

1 个答案: