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

所有表格都有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这样的直接名称将值分配给click函数外部的var answervotes = $(".parent-form1"); var时,它可以很好地工作,但是如果我直接在click函数内部分配名称,则它不起作用任一个(我需要根据父表单来保持动态)。

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

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

最佳答案

我认为您的答案投票选择器不匹配,请使用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/

关于javascript - 具有动态值的函数上使用的变量不允许我通过Ajax发送表单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28999946/

10-12 12:25
查看更多