how to get value outside jquery click function

Question

I have a on click function to get the id of a,and I want to alert it. The following code is not working showing null, why? thanks

var projectId=null;

$('body').on('click', '#list a', function(){
                  projectId=this.id; //id should = 30
                  alert(projectId);  //here display 30
});

alert(projectId); //here display null

---

what i really want to do is: a.js I have sth like, when I click "a" it redirect to another page which need to render by my projectId:href='/projectDetail' this page call b.js

    $.ajax({
                    type: "GET",
                    url: 'http://xxx',
                    dataType:'json',
                    contentType:"application/json",
                    success:function(data){
                        console.log(data);
                        var projectList="<ul style='list-style:none;'>"

                        for (var i = 0; i < data.data.length; i++) {

                                projectList += "<li><div id='listall'><a 
                           id='"+data.data[i].projectId+"' 
                             href='/projectDetail'>"+ 
                                  "<img class='back' src='/img/Homepage_ProjectFrame.png'></li>"
                                 }
                              var projectList="<ul>"
                             });

var projectId=null;

 $(document).on('click', '#listall a', function (){
            event.preventDefault();
             projectId=this.id;
             alert(projectId);
  });  

 alert(projectId);

b.js I have:

$.ajax({
            type: "GET",
            url: 'http://xxx?projectId='+projectId
            dataType:'json',
            contentType:"application/json",
            success:function(data){
                console.log(data.data);
                $(".photoprojectD").attr("src",data.data.projectPhotoUrl);
                $(".dlocation p").html(data.data.countryName);
                $(".dcategory p").html(data.data.categoryName);
 });

So i need projectId from a.js to render dynamic information Do you have any good ideas? Thanks a lot for your guys helping

Answer 1

the second alert(projectId); outside the "click" event handler runs as soon as the page loads. Inevitably this is before your "click" handler can possibly be executed, because the user has likely not had time to click on it, and even if they had time, there's no guarantee that they will. Therefore the variable projectId is not populated when that code executes.

You can certainly use projectId outside your "click" event, but you have to wait until after at least one "click" event has happened before you can expect it to have a value.

There's also danger that your hyperlinks are causing the page to postback before any of this ever happens. Since you're using jQuery you can prevent this very easily:

$('body').on('click', '#list a', function(event) {
  event.preventDefault(); //prevent default hyperlink redirect/reload behaviour
  projectId=this.id; //id should = 30
  alert(projectId);  //here display 30
});

Lastly, ensure that this other place you want to use the value is not doing anything silly like declaring another "projectId" variable with narrower scope and then trying to use that . For example, this will not work as you wish:

var projectId = null;

$('body').on('click', '#list a', function(event) {
  event.preventDefault(); //prevent default hyperlink redirect/reload behaviour
  projectId=this.id; //id should = 30
  alert(projectId);  //here display 30
  exampleFunc(); //call the function below
});

function exampleFunc() {
  var projectId = null; //oops, another "projectId" with narrower scope (within this function) will take precedence here
  alert(projectId); //will be null
});

Whereas this will :

var projectId = null;

$('body').on('click', '#list a', function(event) {
  event.preventDefault(); //prevent default hyperlink redirect/reload behaviour
  projectId=this.id; //id should = 30
  alert(projectId);  //here display 30
  exampleFunc(); //call the function below
});

function exampleFunc() {
  alert(projectId); //will be 30
}