Question

我在一个页面上有很多答案表单，所有表单都有不同的类。

所有表格都有2个按钮来发送父表格。

如果单击#avote_down或#avote_up，则发送表单，然后单击按钮的父表单类并将类保存在var clase中，然后添加。在类名之前（我知道点怪物很奇怪但是如果我不这样做，这不起作用），之后我将之前编辑的类保存在名为answervotes的var上，这样我们就可以使用了它

//declare variables outside the functions to use them
//inside others
var answerdata;
var answervotes;
var clase;
var clasedot;

$('#avote_down, #avote_up').on("click",function(e) {
    e.preventDefault();
    clase = $(this).parents("form:first").attr('class');
    clasedot = '.'+clase; 
    answervotes = $(clasedot);
    answerdata = answervotes.serializeArray();
    answerdata.push({name: encodeURI($(this).attr('name')), value: encodeURI($(this).attr('value'))});
    answervotes.submit();
    answerdata.pop();
});

如果一切顺利，我可以使用下面的ajax函数发送表单，因为你看到ajax函数正在使用之前声明的vars。

answervotes.bind('submit',function () {
    $.ajax({
        url: answervotes.attr('action'),
        type: answervotes.attr('method'),
        cache: false,
        dataType: 'json',
        data: answerdata,
        success: function(data) {
            if(data.message == "plus")
            {
                $("#avote_up").attr('class','options options-hover');
                $("#avote_down").attr('class','options');
                $("#atotal-votes").html(data.votes);
                console.log(data.votes);

            }
            if(data.message == "sub")
            {
                $("#avote_down").attr('class','options options-hover');
                $("#avote_up").attr('class','options');
                $("#atotal-votes").html(data.votes);
                console.log(data.votes);

            }
            if(data.name == "register")
            {
                $('.theme-actions').append('<div class="should-login"><span>' + data.message + '</span><div id="close"></div></div>');

                setTimeout(function() {
                    $('.should-login').fadeOut(300);
                },4000);

                setTimeout(function() {
                    $('.should-login').remove();
                },4300);
            }
            if(data.name == "limited_votes")
            {
                $('.theme-actions').append('<div class="should-login">    <span>' + data.message + '</span><div id="close"></div></div>');

                setTimeout(function() {
                    $('.should-login').fadeOut(300);
                },4000);

                setTimeout(function() {
                    $('.should-login').remove();
                },4300);
            }
            if(data.name == "repeated_vote")
            {
                $('.theme-actions').append('<div class="should-login"><span>' + data.message + '</span><div id="close"></div></div>');

                setTimeout(function() {
                    $('.should-login').fadeOut(300);
                },4000);

                setTimeout(function() {
                    $('.should-login').remove();
                },4300);
            }
        },
        error: function(xhr, textStatus, thrownError) {
            console.log(data.message);
            alert("error");
        }
    });
return false;
});

问题：当我尝试发送这样的表单时，它只是将我发送到表单操作页面，就好像没有使用e.preventDefault（）方法来阻止正常操作，但事实上它就是你看到的。

重要事实：当我使用像answervotes之类的直接名称将值分配给点击功能之外的var answervotes = $(".parent-form1"); var时，它可以完美地运行，但是如果我分配了直接在click函数中的名称，它只是不起作用（我需要这是动态的，取决于父窗体）。

控制台错误：未捕获TypeError：无法读取undefined的属性'bind'，可能是因为在点击按钮之前没有得到answervotes，但我想这会解决与var问题。

这是一个jsfiddle： https://jsfiddle.net/EnmanuelDuran/cyvpkvkk/22/

Answer 1

我认为你的answervotes选择器不匹配，使用console.log或alert来确保你得到了正确的选择：

$(document).ready(function() {
    var answervotes = $(".parent-form1");

    $('#avote_down, #avote_up').on("click",function(e) {
        e.preventDefault();
        answervotes.submit();
    });

    answervotes.on("submit", function(e) {
        e.preventDefault();
        //do ajax
    });
});

这是一个jsfiddle： https://jsfiddle.net/cyvpkvkk/

Answer 2

解决。

我将提交函数嵌套到click函数中，并在执行提交函数后执行表单提交和以下操作：

$('#avote_down, #avote_up').on("click",function(e) {
e.preventDefault();
clase = $(this).parents("form:first").attr('class');
clasedot = '.'+clase; 
answervotes = $(clasedot);
answerdata = answervotes.serializeArray();

answervotes.bind('submit',function () {
$.ajax({
    url: answervotes.attr('action'),
    type: answervotes.attr('method'),
    cache: false,
    dataType: 'json',
    data: answerdata,
    success: function(data) {
        if(data.message == "plus")
        {
            $("#avote_up").attr('class','options options-hover');
            $("#avote_down").attr('class','options');
            $("#atotal-votes").html(data.votes);
            console.log(data.votes);

        }
        if(data.message == "sub")
        {
            $("#avote_down").attr('class','options options-hover');
            $("#avote_up").attr('class','options');
            $("#atotal-votes").html(data.votes);
            console.log(data.votes);

        }
        if(data.name == "register")
        {
            $('.theme-actions').append('<div class="should-login"><span>' + data.message + '</span><div id="close"></div></div>');

            setTimeout(function() {
                $('.should-login').fadeOut(300);
            },4000);

            setTimeout(function() {
                $('.should-login').remove();
            },4300);
        }
        if(data.name == "limited_votes")
        {
            $('.theme-actions').append('<div class="should-login">    <span>' + data.message + '</span><div id="close"></div></div>');

            setTimeout(function() {
                $('.should-login').fadeOut(300);
            },4000);

            setTimeout(function() {
                $('.should-login').remove();
            },4300);
        }
        if(data.name == "repeated_vote")
        {
            $('.theme-actions').append('<div class="should-login"><span>' + data.message + '</span><div id="close"></div></div>');

            setTimeout(function() {
                $('.should-login').fadeOut(300);
            },4000);

            setTimeout(function() {
                $('.should-login').remove();
            },4300);
        }
    },
    error: function(xhr, textStatus, thrownError) {
        console.log(data.message);
        alert("error");
    }
});
return false;
});

answerdata.push({name: encodeURI($(this).attr('name')), value: encodeURI($(this).attr('value'))});
answervotes.submit();
answerdata.pop();
});

它解决了基本问题，然后我使用了独特的表单类，并通过使用表单父类调用其中的元素，所以我可以只调用该元素，即使它们是一些更多的id被调用，就像它没有＆＃ 39; t显示问题，因为每个表单都有一个唯一的类来调用它上面的嵌套元素。

用于记录：变量保留在函数之外，在document.ready上

在具有动态值的函数上使用的变量不允许我通过ajax发送表单

2 个答案: