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

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

所有表单都有 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 函数正在使用之前声明的 var。

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（）方法来阻止正常操作一样，但实际上它就在那里你看到了它。

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

捕获的类型错误：无法读取未定义的属性"绑定"，可能是因为在单击按钮之前不会获得answervotes，但我想这将通过 var 问题来解决。

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