Attaching click event won't work

Question

I've wanted to attach click event to an object not yet added to the DOM like here.

I've used a code from the answer but nothing happens when I click anything.

Here's my HTML:

<html>
<head>
<script src="resources/js/components/jquery/jquery-3.1.1.min.js"></script>
<script src="file.js"></script>
</head>
<body>
    <a href="#">asl;kdfjl</a>
    <div id="my-button">sdgdf</div>
</body>
</html>

JavaScripts are in those location and I can see them in Sources tab in Chrome.

My file.js has content exactly copy-pasted from jsfiddle:

$('body').on('click','a',function(e){
    e.preventDefault();
    createMyButton();
});

createMyButton = function(data) {    
    $('a').after('<div id="my-button">test</div>');        
};

$('body').on('click','#my-button',function (e) {
      alert("yeahhhh!!! but this doesn't work for me :(");
});

Assuming you've just copy+pasted from the fiddle, you've probably missed out the document.ready handler. Although I don't know how you expect us to solve a problem with code we can't see... — Rory McCrossan, Jun 07 '17 at 08:08
Could be two things. 1, Something is wrong in your JS file. 2, try pasting the ` — Deathstorm, Jun 07 '17 at 08:10
Thanks. The problem is definitely the lack of a document.ready handler. Also note that you're creating new elements with the same `id` attribute, which ay cause issues. Use a class to group common elements instead — Rory McCrossan, Jun 07 '17 at 08:14
Well, I just wanted to run that example in my environment. Surrounding the js code with $(function(){}); did the job — Kamil, Jun 07 '17 at 08:17

score 1 · Accepted Answer · answered Jun 07 '17 at 08:12

As your code is in the head tag, you need to use a DOM ready wrapper to ensure your code executes after the DOM has rendered elements.

The jsfiddle doesn't have it because the fiddle is set to run the code onload already.

$(function(){
    $('body').on('click','a',function(e){
        e.preventDefault();
        createMyButton();
    });

    createMyButton = function(data) {    
        $('a').after('<div id="my-button">test</div>');        
    };

    $('body').on('click','#my-button',function (e) {
         alert("yeahhhh!!! but this doesn't work for me :(");
    });
});

score 0 · Answer 2 · answered Jun 07 '17 at 08:19

Your code working with snippet .Better use with document.ready.Post you js after document.ready .And change the selector document instead of body

$(document).ready(function() {

  $(document).on('click', 'a', function(e) {
    e.preventDefault();
    createMyButton();
  });

  createMyButton = function(data) {
    $('a').after('<div id="my-button">test</div>');
  };

  $(document).on('click', '#my-button', function(e) {
    alert("yeahhhh!!! but this doesn't work for me :(");
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">asl;kdfjl</a>
<div id="my-button">sdgdf</div>

Attaching click event won't work

2 Answers2