Witam
cały kod działa poprawnie, ale po dodaniu nowego kodu HTML(function addtask) nie reaguje ono na nowe funkcje (2 ostatnie z kodu). Zgaduje, że jest to powiązane z ładowaniem modelu DOM. Pozdrawiam
var limit = 0;
var opacityValue = 1;
$(".answer").css({
opacity: 0.0
});
$("#add").on("click", function () {
$(".answer").animate({
opacity: 0.0
},500);
console.log(limit);
if(limit <= 3)
addtask();
});
function addtask() {
var task = $("#ideaForm").val();
if (limit >= 3){
$(".answer").animate({
opacity: 1.0
},500).delay(2000).animate({
opacity: 0.0
},500);
$(".answer").html("<p>Limit reached</p>").css({
"background-color" : "#efa3a3",
"border" : "2px solid #ff3737",
});
$("#add").css('opacity', '.3');
}else if (task.length <=3){
$(".answer").animate({
opacity: 1.0
},500).delay(2000).animate({
opacity: 0.0
},500);
$(".answer").html("<p>Must be more than 4 verbs</p>").css({
"background-color" : "#efa3a3",
"border" : "2px solid #ff3737",
});
}else{
$(".taskC").append('<div class="input-group"><span class="input-group-btn"><button class="btn btn-success" type="button"><i class="demo-icon icon-ok"></i></button></span><div class="inside"><p>' + task +'</p></div><span class="input-group-btn"><button class="btn btn-danger" type="button"><i class="demo-icon icon-cancel"></i></button></span></div>');
limit ++;
$("#tezd").html(limit);
$(".answer").animate({
opacity: 1.0,
width: 380
},500).delay(3500).animate({
opacity: 0.0
},500);
$(".answer").html("<p><span style='color: green; font-weight: 700;'>Green</span>-positive and <span style='color: red; font-weight: 700;'>Red</span>-negative experience</p>").css({
"background-color" : "#ffffff",
"border" : "2px solid #959595",
});
};
};
$(".btn-success").on("click", function () {
$(this).closest("div").remove();
$(".answer").html("<p>Thanks for positive opinion</p>").css({
"background-color" : "#51b965",
"border" : "2px solid green",
}).animate({
opacity: 1.0
},500).delay(2000).animate({
opacity: 0.0
},500);
limit--;
$("#add").css({"opacity" : "1"});
$("#tezd").html(limit);
});
$(".btn-danger").on("click", function () {
$(this).closest("div").remove();
$(".answer").html("<p>We'll fix it soon, thanks</p>").css({
"background-color" : "#efa3a3",
"border" : "2px solid #ff3737",
}).animate({
opacity: 1.0
},500).delay(2000).animate({
opacity: 0.0
},500);
limit--;
$("#add").css({"opacity" : "1"});
$("#tezd").html(limit);
});
