クラスがJqueryで動作しない

Question

クラスボタンをクリックしようとするとクラスポインタが機能しませんが、クラスをクリックすると動作しません。何もしません。私のコードでは143行目で、「問題」とラベル付けされています。今はconsole.logと書かれていますが、うまくいきません。 createTable（）関数は、Javascriptの末尾にある最終的なtdにクラスが作成される場所です。任意の助けになります。以下のような

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

委任events。これは、イベントが登録されたときにHTMLがまだDOMにないので必要です。

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

同様に、他のイベントについても同様である。

Answer 2

使用.on（）メソッドは、jQueryオブジェクト内の要素の現在選択されたセットにイベントハンドラを取り付けます。 jQuery 1.7以降、.on（）メソッドはイベントハンドラをアタッチするために必要なすべての機能を提供します。

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

OR

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

詳細：http://api.jquery.com/on/