JS script doesn't work on modal

Question

i am trying to click a button with js when enter key is hit.

document.onkeydown = function(event) {
  if (event.keyCode == 8) {
    document.getElementById('alert_next').click();

  }
return event.returnValue;
}

It does work already with buttons on the page. But as soon as i try to use it on a button which is in a modal the script won't seem to work.

edit: well i am plain stupid.. the error was only the time when the script was loaded

Answer 1

You need to create a document event listener,

basically what I think is happening is this

jsFiddle : https://jsfiddle.net/7c8rza12/

html

<button id="add">
Add
</button>
<div id="content">

</div>

jquery

$(function()
{
    $('#add').on('click', function()
  {
    $('#content').html("<p class='info'>Click here for info</p>");
  });

  $('.info').on('click', function()
  {
    alert($(this));
  });
});

We have a on click event for the .info however on the document ready there isn't any, so when we add the new content it doesn't know to bind a click event to this. What we need to do is this

jsFiddle : https://jsfiddle.net/7c8rza12/1/

jquery

$(function() {
  $('#add').on('click', function() {
    $('#content').html("<p class='info'>Click here for info</p>");
  });

  $(document.body).on('click', '.info', function() {
  alert($(this));
  });
});