Obtenga la identificación del elemento de clase usando jquery

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?

Muchas Gracias

ACTUALIZACIÓN 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 :(

ACTUALIZADO OTRA VEZ 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:

 $("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);
 });

preguntado el 02 de diciembre de 13 a las 19:12

Is the issue that the alert doesn't show up, or that the ID isn't in the alert? -

The alert doesn't show up - I am not sure yet if the id isn't in the alert or not -

$.fn doesn't have an id property. -

5 Respuestas

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.

EDITAR

You selector is jacked up div.maps_popup no 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 también se requiere.

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 necesita to focus on writing cleaner code. Look at the damn console output.

Respondido el 02 de diciembre de 13 a las 20:12

Joe didn't work. I've tried all kinds of variations and still nothing alerts me with the id - mrtechie

Your selector was also wrong. So there were actually two issues. - Joe

This is my selector now: $("div.maps_popup").click(function(){ and yet still not getting the id even using the this.getAttribute('id)'; - mrtechie

jsfiddle.net/Nuu2c There's a functioning example of this two fixes for your question. - Joe

I get that it works in jsfiddle, but when I copy the same code and put it into my js and reload the page and click it doesn't work. Here's the page: test.theslickfeed.com/index.php - mrtechie

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);
 });

Respondido el 02 de diciembre de 13 a las 19:12

aksu - doesn't seem to work. I've tried that example and still no alert box - mrtechie

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);
    });
});

Respondido el 02 de diciembre de 13 a las 19:12

bagonyi - doesn't seem to work. You can see the example here. test.theslickfeed.com/index.php Click on an icon the map. That's where it should at least be showing me an alert with an id. - mrtechie

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

Respondido el 02 de diciembre de 13 a las 19:12

+1 for mentioned that this.id is the best way to do this. Single property reference rather than two function calls. - amigo00

Nemesis02, I get that it works in jsfiddle, and I see it, but when I copy the same code from jsfiddle and add it to my js file and reload the page, it doesn't work. You can see the page at: test.theslickfeed.com/index.php - mrtechie

It looks like the reason that's not working is cause you're applying the click event before you render the popup. Correct me if i'm wrong, but i'm looking at the super-store-finder-mobile.js line 316. That event never gets attached to your bubble so it never fires. Try re-arranging the order these are called and rendered. - Nemesis02

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');
  });

Respondido el 02 de diciembre de 13 a las 20:12

I was hoping that the this.getAttribute('id'); would work but it doesn't. var store_id = this.getAttribute('id'); alert(store_id); is what I have and still nothing alerts me. - mrtechie

This is your problem. Your selector should be div.maps_popup or just .maps_popup : jsfiddle.net/5hD5j - jeffpowrs

flat out - does not work. It may work in jsfiddle but it doesn't work in my code. I have copied and pasted it from jsfiddle and still nothing happens. - mrtechie

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.