javascript does not detect the click on the link

Question

I am inserting link elements and would like to share the clicks, but I'm not getting .. The test code:

<html>
<title></title>
<head>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){
            $("#teste").click(function(){
               $("body").append($("<a>").text("Element A"));
            });

            $("a").click(function(){
               alert("oi");
            });
        });

    </script>

</head>
<body>
    <input type="button" value="INSERT A" id="teste" />
</body>
</html>

You are binding the click event to an element with the ID=teste, but it appears that you do not have such an element — vladzam, Dec 04 '14 at 15:50
@SimplyCraig: he edited the post; initially he had the id="INSERT A" — vladzam, Dec 04 '14 at 15:51

epascarello · Accepted Answer · 2014-12-04T18:21:30.400

1

The link is not on the page when you attach the event. It is like trying to eat a pizza before you make it. You either need to attach the event when you click on it or you need to use event delegation.

$(document).on("click", "a", function(){
    alert("oi");
});

edited Dec 04 '14 at 18:21

answered Dec 04 '14 at 15:50

epascarello

204,599
20
195
236

thanks =)... and pure javascript how to do this? – Erickson Bet Ivanowski Dec 04 '14 at 15:54
document.getElementsByTagName('a').addEventListener('click',function(){alert('oi');}); – Billy Dec 04 '14 at 17:13
@Billy and that is 100% completely wrong. – epascarello Dec 04 '14 at 18:02
Yeah o.k, that didn't work. this does though `var a_s=document.getElementsByTagName('a'); for(var i=0;i – Billy Dec 04 '14 at 18:12
Congrats on adding events, but it still would not work in OPs case. – epascarello Dec 04 '14 at 18:14
@Billy http://jsfiddle.net/wdwqkwhy/1/ Click the button, click the new link, your solution is the same issue the OP had. – epascarello Dec 04 '14 at 18:20

score 0 · Answer 2 · answered Dec 04 '14 at 15:51

You're trying to register a handler before the element is created, you have to use delegation, that is, register the event on an ancestor node that is already there, and filter it.

jQuery has an easy way to do it.

$(document).on('click', 'a', function(){
   alert("oi");
});

javascript does not detect the click on the link

2 Answers2