railsr railsr - 4 months ago 10
Javascript Question

If statement inside click function doesn't work as expected after the first click

check the code below

When I click on the

span
for the first time, it triggers
markStarted
function and
fa
icon and
data-aevent
are updated successfully. And I get
started
in dev console.

When I click it again (without page reload)
markFinished
is not triggered. And I still get 'started' in console.

What am I doing wrong?

<span class="label label-info check " data-id="4" data-aevent="finish"><i class="fa fa-check fa-fw"></i></span>


markStarted, markFinished

var markStarted = function(task){
task.find('i').removeClass('fa-play').addClass('fa-check');
var nextstate = "finish";
task.data("data-aevent", nextstate);
console.log("started");
}
var markFinished = function(task){
task.fadeOut();
console.log("finished");
}


on click function

$(function() {
$(".check").on("click", function() {
var task = $(this);
var task_id = task.data("id")
var aevent = task.data("aevent");

if (aevent == "start"){
markStarted(task);
}else {
markFinished(task);
}

});
});

Answer

in markStarted, you're calling task.data("data-aevent ..., where you need to be calling task.data("aevent" ...