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

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 函数正在使用之前声明的变量。

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 时，如下所示 var answervotes = $(". parent-form1"); 它工作得很好，但是如果我直接在点击函数中分配名称，它也不起作用(我需要它是动态的，具体取决于父表单)。

控制台错误:未捕获类型错误:无法读取未定义的属性“绑定(bind)”，可能是因为在单击按钮之前没有获得answervotes，但我想这是将通过 var 问题解决。

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

Answer 1

我认为您的回答投票选择器不匹配，请使用 console.log 或警报来确保您得到了正确的选择器:

$(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/