Click event not triggered on elements

Question

I have multiple a elements. I'm trying to handle the click event to display on alert the id of the clicked link but nothing is happening. Please help!

$(".sites").click(function() {
  alert('handlin');
  alert($(this).attr("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="sites" id="1">test1</a>
<a href="#" class="sites" id="2">test2</a>

Links are generated here:

$.getJSON(categoriesURL, {
  term: request
}, function(data) {
  var iHtml = '';
  $.each(data, function(i, item) {
    if (10 <= i) 
      return false;
    iHtml += '<li><a href="#" class="sites" id="'+item.id+'">' + (item.title || '') + '</a></li>';
  });
  $('#categories').append(iHtml);
});

I placed your code in a snippet which works absolutely fine. If you still have issues, please check the console for errors, ensure you've included jQuery.js in the page and are running your code under a document.ready event handler. — Rory McCrossan, Sep 04 '18 at 07:51
The code you posted here works.If these links however are generated on the fly you need to use event delegation — Manos Kounelakis, Sep 04 '18 at 07:51
if links generated on the fly like @ManosKounelakis said, you should $(document).on('click', '.sites', function() { /*CODE-HERE*/ }) — Roy Bogado, Sep 04 '18 at 07:51
I guess your js is not loaded after your dom or not loaded at all, maybe you forgot jquery ?, because this is working. — Fabien Greard, Sep 04 '18 at 07:51
As the elements are dynamically generated you need to use a delegated event handler: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Rory McCrossan, Sep 04 '18 at 07:55
Could a passing dupe-hammer holder please VTC this as a dupe — Rory McCrossan, Sep 04 '18 at 07:55
may be you can use `$(document).on('click', '.sites', function() { //Your code here });` — H45H, Sep 04 '18 at 07:57
Actually this is working `$('body').on('click', '.sites', function (e)` — Sz3jdii, Sep 04 '18 at 07:58

Ahmed Yousif · Accepted Answer · 2018-09-04T08:56:32.880

1

you have to bind event after ajax call done

 function bindButtonClick(){
       $(document).on('click', '.sites', function() {
      alert('handlin');
      alert($(this).attr("id"));
    });
    }

$.getJSON(categoriesURL, {
  term: request
}, function(data) {
  var iHtml = '';
  $.each(data, function(i, item) {
    if (10 <= i) 
      return false;
    iHtml += '<li><a href="#" class="sites" id="'+item.id+'">' + (item.title || '') + '</a></li>';
  });
  $('#categories').append(iHtml);
  bindButtonClick();
});

edited Sep 04 '18 at 08:56

answered Sep 04 '18 at 08:00

Ahmed Yousif

2,298
1
11
17

for readability, I would prefer using _live_ event listeners like 'on' as @roy commented in the original question – Patrick Ferreira Sep 04 '18 at 08:51
@PatrickFerreira updated – Ahmed Yousif Sep 04 '18 at 08:57
good, it is better than binding each time. – Patrick Ferreira Sep 07 '18 at 13:41

Click event not triggered on elements

1 Answers1