jQuery .keyup() with .bind() doesn't work

Question

I'm using jQuery code to trigger a input field by using the enter key. I used the code in another view and it works perfect. In the new view, somehow it doesn't work at all. The keyup gets triggered but the .bind() function is not called. Here's the HTML trigger:

<div class="form-group">
   <h3>Customers</h3>
   <input class="form-control" id="searchNew" placeholder="Search" name="searchNew" autofocus="" value="@form("searchValue").value">
</div>

This is the jQuery code:

$('#searchNew').bind("enterKey", function(e){
    console.log("Test2");
    $.ajaxSetup({
        beforeSend: function(){
            $('.loading').fadeIn();
        },
        complete:function(){
            $('.loading').fadeOut();
        }
    });
    $.ajax({
        type : 'POST',
        url : '@routes.Application.searchLicensesAdmin()',
        data : $('#search').serialize(),
        success : function (data) {
            $('#license-table').html(data);
            return false;
        },
        error : function (data) {
            console.log("Error");
        }
    });
    return false;
});
$('#searchNew').keyup(function(e){
    if(e.keyCode == 13){
        console.log("Test1");
        $(this).on("enterKey");
    }
});

Test1 gets triggered and shows up in the console, but Test2 is not even triggered at all. So the problem is not the ajax call, but the .bind(). It's probably a stupid reason why it doesn't work but i can't figure it out. jQuery is included in both documents.

giorgio giorgio · Accepted Answer · 2017-06-13T11:27:45

you need $(this).trigger('enterKey').

.bind() and .on() do pretty much the same, although .bind() is deprecated as of version 3 (so don't use it ;)).

The statement $(this).on('enterKey') just registers a new event listener, with an empty / undefined callback

jQuery .keyup() with .bind() doesn't work

3 Answers