CODEWITHSUNDEEP
javascriptjqueryhtmlcsskeyboard
Zvezdas1989
Zvezdas1989

Reputation: 1465

Click and keypress combined

Hey guys I'm trying to make combine click and keypress on my function, but nothing I've tried so far seems to work. This is my code:

function victoryMessage() {

    $(document).off("keyup", handleKeyUp);
    $('#feedback').append("Bravo!<br><br><div id='replay' class='button'>Nastavi</div>");


    $('#replay').on("click",function () {
        if(questionBank.length>3) {
            gameScreen();
        }
        else {
            finalPage();
        }
    });

    $(document).off("tap", keepFocus).trigger("tap");
}

so far I have tried following:

$("#replay").on("click keyup", function (e) {
    if (e.type == "click" || e.keyCode == 13) {
        if(questionBank.length>0) {
            gameScreen();
        }
        else {
            finalPage();
        }
    }
});

and

var callback = function() {
    if(questionBank.length>0) {
        gameScreen();
    }
    else {
        finalPage();
    }   
};

$("#replay").keypress(function() {
    if (event.which == 13) callback();
});

$('#replay').click(callback);

and

$(document).on("keypress", function(e){
    if (e.which == 13) {
        testKey();
    }
});

I have also tried some other things, but nothing seems to work. Here the link so you see my full code in action http://www.wpacademy.nextweb.space/TestingMobile/
EDIT: To clarify as Andy said I want the click to register when clicking only the the replay button, and the enter key to register when pressed anywhere within the document.

Upvotes: 1

Views: 4499

Answers (3)

Michael Coker
Michael Coker

Reputation: 53709

Since the element is created via JS, assign the click handler to document and defer it to #replay. And I'm not sure how you plan on capturing keyup on a div, but if you set contenteditable on the div, you can double click on the text, then type in it to show both events are being captured. Here's a codepen http://codepen.io/anon/pen/RpGEWK

$('#feedback').append("Bravo!<br><br><div id='replay' class='button' contenteditable>Nastavi</div>");
$(document).on("click keyup", "#replay", function(e) {
  console.log(e);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="feedback"></div>

Upvotes: 1

Andy Hoffman
Andy Hoffman

Reputation: 19119

I think this is what you're after. You want the click to register when clicking only the the replay button, and the enter key to register when pressed anywhere within the document.

$(document).on("click keypress", function (e) {      
  if (e.type === "click" && e.target && e.target.id === "replay") {
    e.preventDefault();  
    $("#output span").html("click happened");
  } else if (e.type === "keypress" && e.keyCode === 13) {   
    e.preventDefault();  
    $("#output span").html("enter key anywhere within document happened");
  }
});
#output {
  margin-top: 1em;
  padding: 0.5em 0.5em 0;
  border: 2px dashed gray;
  width: 300px;
  display: block;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="replay">replay button</button>
<div id="output">Event type: <span></span></div>

Upvotes: 3

Petros Kyriakou
Petros Kyriakou

Reputation: 5343

From my tests you cannot keypress a button directly so a possible solution is the following

When the user presses enter anywhere on screen, replace alert with your function call.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

$("#replay").on("click", function(){
  function call
});

Also to avoid having your code run in the keypress event all the time, you can check if a specific element is present on the screen like the replay button.

Hope that helps

Upvotes: 3

Related Questions