How can I name an already defined function when a key is pressed?

Question

Here is my code:

    $(document).on('click', '.addNewName', function addNewUser() {
        var names = $('.compare_list td:nth-child(1)').map(function () {
            return $(this).text().trim();
        }).get();
        var newname = $('.newname').val();

        if ($.inArray(newname, names) != -1) {
            alert('this name is duplicate');
        } else if (newname == '') {
            alert('enter a name');
        } else {
            $('.compare_list > tbody:last-child').append('<tr><td>'+newname+'</td><td><i class="fa fa-times" aria-hidden="true"></i></td></tr>');
        }

    })

    // add user by Enter button
    $("#newnam").keypress(function (e) {
        if (e.keyCode == 13) {
            addNewUser();
        }
    });

When I click .addNewName, my code also works. But when I press the enter key when pressed #newname, it throws this error:

Unconnect ReferenceError: addNewUser not defined (...)

Can anyone fix this?

Answer 1

The javasctiptquestion is addNewUsernot defined outside the scope addNewUser.

Define it addNewUseras a named function, set the event handler as an event .addNewName click, call and, possibly, pass parameters addNewUserto #newnam keypress.

   function addNewUser() {
      var names = $('.compare_list td:nth-child(1)').map(function() {
        return $(this).text().trim();
      }).get();
      var newname = $('.newname').val();

      if ($.inArray(newname, names) != -1) {
        alert('this name is duplicate');
      } else if (newname == '') {
        alert('enter a name');
      } else {
        $('.compare_list > tbody:last-child')
        .append('<tr><td>' + newname 
          + '</td><td><i class="fa fa-times" aria-hidden="true"></i></td></tr>');
      }

    }

    // add user by Enter button
    $(document).on("keypress", "#newnam", function(e) {
      if (e.keyCode == 13) {
       addNewUser() // set `this`, pass parameters to `addNewUser`
      }
    });

    $(document).on('click', '.addNewName', addNewUser);

Answer 2

    function addNewUser() {
            var names = $('.compare_list td:nth-child(1)').map(function () {
                return $(this).text().trim();
            }).get();
            var newname = $('.newname').val();

            if ($.inArray(newname, names) != -1) {
                alert('this name is duplicate');
            } else if (newname == '') {
                alert('enter a name');
            } else {
                $('.compare_list > tbody:last-child').append('<tr><td>'+newname+'</td><td><i class="fa fa-times" aria-hidden="true"></i></td></tr>');
            }

        }
$(document).on('click', '.addNewName', addNewUser);

addNewUser $(document).on.

Answer 3

, , . AddNewUser .

function addNewUser() {
        var names = $('.compare_list td:nth-child(1)').map(function () {
            return $(this).text().trim();
        }).get();
        var newname = $('.newname').val();

        if ($.inArray(newname, names) != -1) {
            alert('this name is duplicate');
        } else if (newname == '') {
            alert('enter a name');
        } else {
            $('.compare_list > tbody:last-child').append('<tr><td>'+newname+'</td><td><i class="fa fa-times" aria-hidden="true"></i></td></tr>');
        }
    }

$(document).on('click', '.addNewName',function(){
 addNewUser();
});

newnam

$("#newnam").keypress(function (e) {
        if (e.keyCode == 13) {
            addNewUser();
        }
    });

Answer 4

function addNewUser() {
        var names = $('.compare_list td:nth-child(1)').map(function () {
            return $(this).text().trim();
        }).get();
        var newname = $('.newname').val();

        if ($.inArray(newname, names) != -1) {
            alert('this name is duplicate');
        } else if (newname == '') {
            alert('enter a name');
        } else {
            $('.compare_list > tbody:last-child').append('<tr><td>'+newname+'</td><td><i class="fa fa-times" aria-hidden="true"></i></td></tr>');
        }

    }

$(document).on('click', '.addNewName', addNewUser)

    // add user by Enter button
    $("#newnam").keypress(function (e) {
        if (e.keyCode == 13) {
            addNewUser();
        }
    });

Answer 5

. $(this) .

$(document).on('click', '.addNewName', function() {
    addNewUser($(this));
});
function addNewUser($THIS) {
    var names = $('.compare_list td:nth-child(1)').map(function() {
        return $THIS.text().trim();
    }).get();
    var newname = $('.newname').val();

    if ($.inArray(newname, names) != -1) {
        alert('this name is duplicate');
    } else if (newname == '') {
        alert('enter a name');
    } else {
        $('.compare_list > tbody:last-child').append('<tr><td>' + newname + '</td><td><i class="fa fa-times" aria-hidden="true"></i></td></tr>');
    }
}

    // add user by Enter button
$("#newnam").keypress(function(e) {
  if (e.keyCode == 13) {
    addNewUser($(this));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hide result

Answer 6

$(document).on('click', function() {}). . .

function addNewUser() {
    //...
}

$(document).on('click', '.addNewName', addNewUser );