How can I call a function at a click of a button?

Question

I recently started playing around with javascript for fun. I worked myself through the most of w3schools tutorial (including jquery ofc).

The point where i got stuck is simply calling a function at a click of a button.

My code (edited to provide a Minimal, Complete, and Verifiable example)

$("#linkId1").on("click", function(){

  setTimeout(function(){

  function decryptText() {
  alert( "decrypted!" );
  }

  $("tableId").append('<a id="decryptID" class="button">decrypt</a>');
  $("#decryptID").on("click", decryptText);

  }, 500);
});

HTML:

<a id="linkId1">firstLink</a>

<table>
 <tbody>
  <tr>
   <td id="tableId">
    <a id="button1" class="button"></a>
    <a id="button2" class="button"></a>
   </td>
  </tr>
 </tbody>
</table>

Here's what i've already tried:

• Different approaches to calling the function

• Making the function decryptText() global or local

• - Adding an eventListener to the button after creating it (because I read on another post that it's better to use the eventListener than putting the onclick attribute in the HTML-tag). ~I mixed basic js with jQuery methods here - BIG mistake.

The browser console does not give me any errors - when I changed to code a bit, I got: Reference Error: decryptText() not defined

S.

EDIT: I tried doing it all in jQuery only, the selectors and the event handling.

As you can see, I changed the example code to the beginning of a simple encrypt and decrypt script - the core problem still stays the same though.

Checking with Firefox' inspector tool, this time the element does not have any event bound to it.

A probably important piece of information is that the table you can see in the HTML does not exist before an onclick ajax handler is called from the element #linkId1 and inserts the whole div containing the tables into the html.

Answer 1

I solved it! (Thanks to Cbroe & Se0ng11)

Code before:

$("#tableId").append('<a id="decryptID" class="button">decrypt</a>');
$("#decryptID").on("click", decryptText);

Code after:

$("#tableId").append('<a class="button">decrypt</a>');
$(".button:contains('decrypt')").on("click", decryptText);

The problem was created by the static ID i assigned to the hyperlink element I append() in line 1. Removing the ID and changing the jQuery selector in line 2 worked!

Answer 2

I'm going to provide an alternative solution to your problem. If you create the element as a fully fledged jQuery before you append it to the table you can bind the click event directly to this without having to find it again:

var newA = $('<a\>').addClass('button').text('decrypt');
newA.on("click", decryptText);
$("#tableId").append(newA);

$('<a\>') will create the DOM element as a variable before you append it to the DOM. The main advantage here over your current code is this will guarantee that that click is bound to that <a> tag, even if you have multiple elements with the same text(decrypt). I'm mainly saying this becuase the selector you use ".button:contains('decrypt')" is pretty vague and could match things that your not expecting or event bind a handler twice if you run the same code twice.

Another option is to bubble the events using delegation:

$("#tableId").on('click', '.button', decryptText);

the event handler is now bound to the static item tableId but it's listening for events that match the underlying class button. This is covered comprehensibly here Event binding on dynamically created elements?

With the above you can happily add as many new <a> as you want safe in the knowledge that the event binding is already dealt with, i.e. you don't have to bind the event on creation.

Answer 3

Try this, you was missing few things, $(document).ready(function () {} and $("tableId").append(...); should be using # $("#tableId").append(...); because tableId is id of the element not element itself. It will work with W3c as well it is not like you should not use this or that because of you are beginner. you can use any where.

$(document).ready(function () {
         $("#linkId1").on("click", function () {
         setTimeout(function () {
         function decryptText() {alert("decrypted!");
         }
         $("#tableId").append('<a id="decryptID" class="button">decrypt</a>');
         $("#decryptID").on("click", decryptText);}, 500);});
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table><tr><td>
      <a id="linkId1">firstLink</a></td>
    </tr>
        <tr><td id="tableId">
            <a id="button1" class="button"></a>
            <a id="button2" class="button"></a>
            </td>
        </tr>
 </table>