jQuery.on

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-pre">
      <pre id="pres1" data-id="1" class="pre-element">Some text 1</pre>
      <pre id="pres2" data-id="2" class="pre-element">Some text 2</pre>
      <pre id="pres3" data-id="3" class="pre-element">Some text 3</pre>
    </div>
  </body>

</html>

$(document).ready(function() {
  $(".container-pre").on("click", ".pre-element", function(e) {
        var elem = $(e.currentTarget);
        var id = elem.attr("data-id");
        alert( "Handler for .click() called at element " + id);
    });
});