javascript - Keycode trigger on enter key not functioning correctly -

i'm using keycode trigger button click on enter. have following, working when alert placed in keycode function, not when placed in .click(function.... not sure i'm missing keycode trigger ajax call. pushing ?imageid=750 end of query string in url.

//force use of numerical input $('#imageid').keyup(function (event) {     this.value = this.value.replace(/[^0-9\.]/g, '');     if (event.keycode == 13) {           alert($("#imageid").val());         //event.preventdefault();         $('.image-search').trigger('click');     } });    $('.image-search').click( function () {     var root = "http://localhost:7777/proxy/staging/rest/v1/cms/story/id/";     //clear image id value previous entries     $("#imageid").val('');     var encodeid = $("#imageid").val();     var bearertoken = localstorage.getitem('authorization');      //if testing on localhost     if (document.domain == 'localhost') {         url = root + encodeid + "/images";     } else {         //if in production         url = "/cropper/admin/cropv2/rest/v1/cms/story/id/" + encodeid + "/images";         //grab referrer url asset id         //strip out asset id, match don't include 'assets' , set succeseeding value asset id         var regexp = /assets\/(\d+)/;         var assetid = regexp.exec(window.document.referrer);         $("#imageid").val(assetid[1]);     };     $.ajax({         url: url,         method: 'get',         headers: {             "authorization": bearertoken         },     }).then(function (response) {         var obj = response;         $("#imageid").css("border-color", "#ccc");         $(".search-results").empty();         (var property in obj.entity.entries) {             if (obj.entity.entries.hasownproperty(property)) {                 $(".search-results").append($("<li><a href='" + obj.entity.entries[property].uri + "' target='_blank'><div class='thumbnail'><img width='30' height='30' src='" + obj.entity.entries[property].uri + "' target='_blank'/></img><div class='caption'><p>" + obj.entity.entries[property].orientation + "</p></div></a></li>"));             }         }         //$(".search-results").append("<div class='caption'>" + data.id + "</div><div class='thumbnail'><img width='40' height='40' src='" + data.thumbnailurl + "'/></img>").css("float", "left");     }).fail(function (data) {         $(".search-results").empty();         $(".search-results").append("<p class='alert alert-danger'>invalid id</p>");         $("#imageid").css("border-color", "red");     }); }); }); 

but when implemented full project, no longer works correctly. i'm not sure i'm missing here.

using fiddle: jsfiddle, , removing lines 1-173, trigger works correctly. lines included, seems blocked.

your code working fine, having other javascript errors present causing script stop.

also try $('.image-search').click(); instead of $('.image-search').trigger('click');