How to get both onkeypress and onclick work in Jquery/Javascript?

Question

The following is my code:

<div class="col-xs-12  col-sm-12 col-md-12 col-lg-12 cardWrap">
                    <div class="col-xs-12  col-sm-12 col-md-12 col-lg-12 card">
                        <form action="" onsubmit="return chainSearch();" name="searchChainForm" id="searchChainForm" autocomplete="off">
                        <div class="col-xs-12  col-sm-12 col-md-12 col-lg-12 pad5">
                            <span class="col-xs-12  col-sm-12 col-md-12 col-lg-12 resultTitle" style="padding-left:5px;padding-bottom:5px;"> 
                                Find <c:out value="${chainNameDisplayed}"/> in  
                            </span>

                            <input type="hidden" id="chainSearchQueryString" value="${chainListingBean.searchQueryString}" />
                            <input type="hidden" id="city" value="${cityDisplayName}" />
                            <input type="hidden" id="catIds" value="${chainListingBean.categoryIds}" />

                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pad0" id="the-basics"><input id="inputBar" AUTOCOMPLETE="off" title="Locality" style="padding-left:6px;padding-right:6px;top:2px;" class="form-control typeahead" type="text" name="whereChain" placeholder="Enter Locality:" tabindex="2" maxlength="100"/> 


                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pad0" style="margin:15px 0px 5px 0px;"> 
                                <a id="goHref" class="btn btn-default cardFooterButtonBlue" href="#">Go</a> 
                                <input type="hidden" name="city" value="${cityDisplayName}"/>
                            </div>

                        </div>
                        </form>
                    </div>
                </div> 








        <script>

        var states = [ <c:forEach items="${chainListings}" var="province" varStatus="provinceStatus">  
        "${province.locality} - ${province.streetAddress}|<url:listingURL listingBean="${province}"/>"
        <c:if test="${!provinceStatus.last}">    
          ,    
        </c:if>   
     </c:forEach> ]

        var substringMatcher = function(strs) {
              return function findMatches(q, cb) {
                var matches, substringRegex,substringRegexExtended;

                // an array that will be populated with substring matches
                matches = [];

                // regex used to determine if a string contains the substring `q`

                substrRegex = new RegExp(q, 'i');
                substringRegexExtended = new RegExp("^"+q, 'i');

                // iterate through the pool of strings and for any string that
                // contains the substring `q`, add it to the `matches` array
                $.each(strs, function(i, str) {
                    var split=str.split('|');
                  if (substringRegexExtended.test(split[0])) {
                    matches.push(str);
                  }
                });

                $.each(strs, function(i, str) {
                    var split=str.split('|');
                      if (substrRegex.test(split[0])) {
                        matches.push(str);
                      }
                    });


                var uniqueNames = [];
                $.each(matches, function(i, el){
                    if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
                });



                cb(uniqueNames);
              };
            };



        $('#the-basics .typeahead').typeahead({
              hint: true,
              offset: true,
              highlight: true,
              minLength: 1
            },
            {

              name: 'states',
              source: substringMatcher(states),

               templates: {
                   suggestion: function(states){
                       return '<div tabindex="-1" onkeypress="keyPressSelect(event,\''+states.split('|')[1]+'\')" onclick="loadHref(\''+states.split('|')[1]+'\')">' + states.split('|')[0] + '</div>';
                    }

  }
            });

    function loadHref(url){
        alert("hi");
        document.getElementById("inputBar").blur();
        document.getElementById("goHref").href=url; 

    }


     function keyPressSelect(e,url){
         alert("hi");
            if(e.keyCode == 13){
                alert("Enter was pressed was presses");
                document.getElementById("inputBar").blur();
                document.getElementById("goHref").href=url; 
            }

            else
                return false;

        }
        </script>

I am able to enter the function loadHref from onclick in the div but the function in the onkeypress is not executing for any key and not just enter key.

I have checked the format of the code before and after it is rendered on the browser which seems fine and as follows:

<div tabindex="-1"  onkeypress="keyPressSelect(event,'http://someLink.html')" onclick="loadHref('http://someLink.html')" class="tt-suggestion tt-selectable"><strong class="tt-highlight">Y</strong>elahanka - Bellar<strong class="tt-highlight">y</strong> Road</div>

<div tabindex="-1" onkeypress="keyPressSelect(event,'http://aman.asklaila.com/listing/Bangalore/yelahanka-new-town/axis-bank-atm/ODDBt5P2/')" onclick="loadHref('http://aman.asklaila.com/listing/Bangalore/yelahanka-new-town/axis-bank-atm/ODDBt5P2/')" class="tt-suggestion tt-selectable"><strong class="tt-highlight">Ye</strong>lahanka New Town - 2, 1st Main Road</div>

Please advice on what I may be doing wrong.

Note: I am forced to use obtrusive JS since i am creating the Div elements dynamically and I do not wish to assign them an ID.

Answer 1

Yes: you need to add a tabindex attribute to the to allow it to receive the focus.

.keypress on a DIV tag

They use jQuery here, but should be the same concept.

Here's a tiny example: https://jsfiddle.net/qt6gkp6h/1/

<div onkeypress="console.log('keypress1')" onclick="console.log('click1')" tabindex="1">Click me and type</div>

<div onkeypress="console.log('keypress2')" onclick="console.log('click2')">Click me and type 2</div>

So as I'm sure you have discerned, just change this:

return '<div tabindex="-1" onkeypress="keyPressSelect(event,\''+states.split('|')[1]+'\')" onclick="loadHref(\''+states.split('|')[1]+'\')">' + states.split('|')[0] + '</div>';