Question

我的类指针一旦被点击就无法工作。我正在尝试创建一个删除按钮，但是当我点击我需要的类时它不起作用或做任何事情。问题发生在我的代码中的第143行附近并且标有＆＃39;问题＆＃39;而现在它只是说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/

类在Jquery中不起作用

2 个答案: