Classes Not Working in Jquery

Question

My class pointers will not work once they are clicked.I am trying to create a delete button ,but when I click on the class I need it does not work or do anything.The problem occurs at around line 143 in my code and is label with 'the problem' and right now it just says console.log but not even that will work. The createTable() function is where the class is created in the final td at the bottom of the Javascript if that helps any.Any help is appreciated with this!

var name;
var age;
var sex;
var person;
var flagOne;
var flagTwo;
var flagThree;
var array = [];
var rowIndex;

createTable();

/* Modal Scripts */

$('.left').click(function(){
    name = $("#name").val('');
    age = $("#age").val('');
    sex = $("#sex").val('');

    $('.form-row:first-child').css('border','0');
    $('.form-row:nth-child(2)').css('border','0');
    $('.form-row:nth-child(3)').css('border','0');

    if($('td>a.delete').css('opacity') == 1){
        $('.modal-wrapper').css('display','none');
    }

    else  {
    $('.modal-wrapper').css('display','block');
    $('.modal').animate({
        opacity:1,
        marginTop:'-117px'
    },500);
}
});

$('.fa-times').click(function(){
    $('.modal-wrapper').css('display','none');

    name = $("#name").val('');
    age = $("#age").val('');
    sex = $("#sex").val('');

    $('.modal').animate({
        opacity:0,
        marginTop:'-250px'
    });
});

$('.modal-background').click(function(){
    $('.modal-wrapper').css('display','none');

    name = $("#name").val('');
    age = $("#age").val('');
    sex = $("#sex").val('');

    $('.modal').animate({
        opacity:0,
        marginTop:'-250px'
    });
});

/* Validation */

$('#button').click(function(){
    flagOne = false;
    flagTwo = false;
    flagThree = false;

    name = $("#name").val();
    age = $("#age").val();
    sex = $("#sex").val();

    if(name.match(/^([a-zA-Z]{2,15}\s[a-zA-z]{2,15})/)){
        flagOne = true;
    }
    else {
            flagOne = false;
    }

    if (age < 0 || age > 130 || isNaN(age) || age == '') {
            flagTwo = false;
    }
    else {
        flagTwo = true;
    }

        if (sex == "male" || sex == "Male" || sex == "female" || sex == "Female"){
            flagThree = true;
        }
        else {
            flagThree = false;
        }

        if(flagOne == false || flagTwo == false || flagThree == false){
            if(flagOne==false){
                $('.form-row:first-child').css('border','3px solid red');
            }
            else {
                $('.form-row:first-child').css('border','0');
                $('.form-row:first-child').css('border-bottom','3px solid red');
            }

            if(flagTwo == false){
                $('.form-row:nth-child(2)').css('border-right','3px solid red');
                $('.form-row:nth-child(2)').css('border-left','3px solid red');
            }
            else {
                $('.form-row:nth-child(2)').css('border','0');
            }
            if(flagThree == false){
                $('.form-row:nth-child(3)').css('border','3px solid red');
            }
            else {
                $('.form-row:nth-child(3)').css('border','0');
                $('.form-row:nth-child(3)').css('border-top','3px solid red');
            }
        }

        else if(flagOne == true && flagTwo == true && flagThree == true) {
            $('.modal-wrapper').css('display','none');
            $('.modal').animate({
                    opacity:0,
                    marginTop:'-250px'
                });

            storeObject();
        }
});

/* Delete Button */

$('.right').click(function(){

    if($('td>a.delete').css('opacity') == 1){
        $('td>a.delete').css('opacity','0');
    }
    else if($('td>a.delete').css('opacity') == 0){
        $('td>a.delete').css('opacity','1');
    }
});

/* THE PROBLEM */

$('.delete').click(function(){
    console.log("heelo");
});

/* Array Creation */

function storeObject() {

function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
}

person = new Person(name,age,sex);
array.push(person);

testArray();
}

/* Test Array */

function testArray() {
    if(array.length == 8){
        createTable();
        alert('Table Limit Reached!');
    }
    else if (array.length > 8){
        array.pop();
        alert('Too Many Rows!');
    }
    else {
        createTable();
    }
}

/* Table Creation */

function createTable() {
    var table = "<table><tr><td>Name<span class='special'>▲</span></td><td>Age<span class='special'>▲</span></td><td>Sex</td></tr>";
  for(var i=0;i < array.length;i++){
        if (array.length > 0){
    table += "<tr><td>" + array[i].name + "</td>";
    table += "<td>" + array[i].age + "</td>";
    table += "<td>" + array[i].sex + "<a class='delete'><i class='fa fa-trash-o' aria-hidden='true'></i></a></td></tr>";
    }
  }
  table += "</table>";
  document.getElementById("tablePrint").innerHTML = table;
}

Answer 1

use .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

$( ".left" ).on( "click", function() {  
      console.log( $( this ).text() );
});

OR

$(document).on( "click",".left" function() {  
      console.log( $( this ).text() );
});

more detail :http://api.jquery.com/on/

Answer 2

Delegate events like below. This is needed since when the events are registered the HTML is not in DOM yet.

$(document).on("click", ".delete", function(){
    console.log("heelo");
});

and similarly for other events as well.