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

Question

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

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

如果单击 #avote_down 或 #avote_up，我将发送表单，然后单击按钮的父表单 class 并将 class 保存在 var clase，然后添加 .在 class 名称之前（我知道点的东西很奇怪，但如果我不这样做，这是行不通的），在此之后我将之前编辑的 class 保存在名为 answervotes 所以我们可以使用它。

//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() 方法一样被用来阻止正常动作，但实际上你看到了它。

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

控制台错误： 未捕获类型错误：无法读取未定义的属性 'bind'，可能是因为直到单击按钮，但我想这可以通过 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/

Answer 2

已解决。

我在点击函数中嵌套了提交函数，执行了表单提交，执行完提交函数后的动作如下：

$('#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();
});

它解决了基本问题，然后我使用独特的形式 classes 并使用父形式 class 调用其中的元素，这样我就可以只调用那个元素，即使它们有更多的 id 像那样调用它不会显示问题，因为每个表单都有一个唯一的 class 来调用它上面的嵌套元素。

备案： 变量留在函数之外，在 document.ready

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

Variable used on function with a dynamic value doesn't allow me to send form through ajax

javascript

ajax

jquery

preventdefault