storing id into variable upon clicking after calling AJAX

Question

I tried using an onClick within the <a> tag but it doesn't work. I'm trying to capture 777 into a variable that way I can use it later in the code. I was wanting to click on the image then it display an alert box that way I know that its working, but its not working.

$(function() {
    $.ajax({  
      async: false,    
      cache: false,  
      dataType: 'json',  
      url: 'http://www.getitfree.us/api/posts.json?filter=popular&limit=2',  
      type: "get",  
      success: function(json) {  
        var arr = ['51ae281f1521021885573121', '51b7af297665ebc546c39a34'];  
        for (var i = 0; i < arr.length; i++) {  
            $("#output").append("<div>" + "<a href='./next_page.html' target='_blank' id='777' onClick='Click(this.id)'>" + "<img class='img-responsive' alt='advertisement image' src='" + json.data[arr[i]].images['0'] + "'>" + "</a>" + "<p class='adjust_pTitle'>" + json.data[arr[i]].title + "</p>" + "</div>");
        }  
      },  
      error: function(json) {  
          throw new error();  
      }  
    })  
  });  

  function Click() {  
     alert("clicked");    
  };

give us a part of you html code. What is the element you are trying to define click event for? what do you mean by "capturing 777"? — zero point, Jan 31 '16 at 19:43
Thanks for replying. I only have an empty div that I'm appending to:
Basically I'm wanting to put the numbers 777 into a variable to later use in my javascript. — , Jan 31 '16 at 19:49
From the description it seems "console" might be more helpful. See question: [What is console.log?](http://stackoverflow.com/questions/4539253/what-is-console-log). You might also look at using the data attribute: [How to get the data-id attribute?](http://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) — Yogi, Jan 31 '16 at 19:50
The only warning I get in the Chrome Developer Tools is: "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/." — , Jan 31 '16 at 19:52
I tested your code and it seems to be working. I click the image, the alert appears and then the page redirects to another url. What's the problem ? — R.Costa, Jan 31 '16 at 19:54
It doesn't seem to be working for me. When I click on the image, it automatically redirects to the other url. I don't see any alert box. — , Jan 31 '16 at 20:01

score 0 · Accepted Answer · answered Jan 31 '16 at 20:08

Try giving a class, e.g. .anchor to the appended element and use the on() method to listen to the click event:

$("#output").append("<div>" + "<a href='./next_page.html' class='anchor' target='_blank' id='777'>" + "<img class='img-responsive' alt='advertisement image' src=''>" + "</a>" + "<p class='adjust_pTitle'>Title</p>" + "</div>");

$(document).on('click', '.anchor', function(e) {
  e.preventDefault();
  alert($(this).attr("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="output"></div>

Thanks, that worked. I tried to upvote you but I haven't got to 15 points yet. Will certainly upvote later when after I collect enough points. Thanks again. — , Jan 31 '16 at 20:32

storing id into variable upon clicking after calling AJAX

1 Answers1