我在页面上有很多答案表单,所有表单都有不同的类。
所有表格都有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/