Get the class element id using jquery

Question

When I load the page and type this into the console:

 $("div .maps_popup");

I get the following shown to me:

 <div class="maps_popup" id="2">

So from there in my code I have the following:

 $("div .maps_popup").on('click', function () {
             var store_id = $(this).id;
                 alert(store_id);
  });

And when I click on the icon in the map - I do not get the alert in the browser for the id. So something isn't right. Can someone adjust my code and let me know what I am doing wrong?

Thanks

I've tried all the examples on this thread and none seem to work. 我已经尝试了该线程上的所有示例，但似乎都没有用。 The page is at: http://test.theslickfeed.com/index.php

Click on any of the icons on the map and again open developer tools and then go to the console and do:

$("div .maps_popup") You will see the div tag there.

None of the examples work so far :(

This is my present code and it still isn't doing what it should be which is snagging the id of the maps_popup class and passing it to the url for a panel refresh: 这是我目前的代码，仍然没有执行应做的工作，即捕获maps_popup类的ID并将其传递给url以进行面板刷新：

 $("div.maps_popup").click(function(){
                    var store_id = this.id;
        var pathname =  "ajax=1&store_id="+store_id+"&action=get_nearby_stores&distance="+distance+"&lat="+lat+"&lng="+lng+"&products="+$('#edit-products').val();

        $("#pocp_content").load("file1.php?" + pathname);
 });        

Answer 1

alert(this.id)

is all you need. jQuery is not needed to retrieve that info.

jQuery has already bound this to the div which is what you are seeing in the console.

---

EDIT

You selector is jacked up div.maps_popup not div .maps_popup . The second selector would match (looking for a child element with class maps_popup):

 <div> <div class="maps_popup"></div> </div> 

However, this previous statement this.id is required as well.

LAST EDIT BEFORE I DELETE THIS

distance is not defined in:

 var pathname = "ajax=1&store_id="+store_id+"&action=get_nearby_stores&distance="+distance+"&lat="+lat+"&lng="+lng+"&products="+$('#edit-products').val(); 

You have way too many errors. You need to focus on writing cleaner code. Look at the damn console output.

Answer 2

id isn't jquery function. It's javascript's but there is an alternative for jquery. There's how to fix it:

 $("div .maps_popup").on('click', function () {
         var store_id = $(this).attr('id');
             alert(store_id);
 });

Answer 3

Listen for document load, and change .id to .attr('id'):

$(function () {
    $("div .maps_popup").on('click', function () {
        var store_id = $(this).attr('id');
        alert(store_id);
    });
});

Answer 4

There are many ways. I'd suggest one of the last two.

 $("div.maps_popup").on('click', function () {
             $(this).attr('id');
  });

 $("div.maps_popup").on('click', function () {
             this.id;
  });

 $("div.maps_popup").on('click', function () {
             this.getAttribute('id');
  });

Answer 5

The short way to do it is you'll need to use

$(this).attr('id') 

to retrieve what the value is of the ID field, the better way to do it which has higher performance is by retrieving it from the dom object like this

this.id