JavaScript - DOM

Question

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);
});

 

Answer 1

W momencie jak przypinasz zdarzenia do elementów, muszę one istnieć w DOM. Jeśli pojawiają się tam dopiero potem, wskutek działania jakiegoś skryptu, nie będą posiadały tych zdarzeń podpiętych.

Wykorzystaj event delegation - zobacz w Googlach. W przypadku jQ to funkcja .on()

Comments

Dzięki wielkie, trochę poszukałem i sporo o tym się dowiedziałem. Pozdrawiam