How to get id of clicked div jquery

Question

I have been trying to get the id of a clicked div of same classes but with different IDs. I tried everything I know.

Here is one code I tried (in this one, the .click function() does not work .. edit: meaning it does not seem to run the code when clicked at all!):-

$(".u_search").click(function() {
    var attr_u_search = $(this).attr('id');
    var dataString = '&u_search=' + $(".u_search").attr('id');
    alert(dataString);

    $.ajax({
    type: "POST",
    url: '/script/profile.php',
    data: dataString,
    cache: false,
    success: function(data) {
          $('#ui_profile').show();
          $('#ui_profile').html(data);
          location.hash = 'profile' + 'id=' + dataString;
          $(".searchbox").val('');
          $("#usr_suggest").hide();

    }
  });
});

PHP:-

echo "<tr id='" . $id . "' class='u_search' height='40px'><td width='40px'><img class='avatar' src='$avater' /></td><td>" . $fname_ . " " . $lname_ . "</td></tr>";
}}

Here is another combination of codes I tried (error in this one: suppose I have 5 divs, and even if I clicked the 2nd div or the 3rd div, it only captures the id of the first div [div 1] and not the clicked div. I want to be able to capture the id of the clicked div.):-

$(".u_search").click(function() {
    var attr_u_search = $(".u_search").attr('id');
    var dataString = '&u_search=' + $(".u_search").attr('id');
    alert(dataString);

    $.ajax({
    type: "POST",
    url: '/script/profile.php',
    data: dataString,
    cache: false,
    success: function(data) {
          $('#ui_profile').show();
          $('#ui_profile').html(data);
          location.hash = 'profile' + 'id=' + dataString;
          $(".searchbox").val('');
          $("#usr_suggest").hide();

    }
  });
});

PHP:-

echo "<tr id='" . $id . "' class='u_search' height='40px' onclick='javascript:op_prof(1)'><td width='40px'><img class='avatar' src='$avater' /></td><td>" . $fname_ . " " . $lname_ . "</td></tr>";
}}

edit: when I use the first code (the one with .click function()) the code does not seem to run at all! .. I am using jquery library version 1.9.1

$(".u_search").attr('id') will always return the ID of the first element with that class. Does $(this).attr('id') (i.e. your attr_u_search) not give you what you want? — cmbuckley
– cmbuckley, Commented Apr 19, 2013 at 11:36
Please post your HTML code too. THe problem doesn't seem to be with the jQuery code. — Mysteryos
– Mysteryos, Commented Apr 19, 2013 at 11:48

bipen · Accepted Answer · 2013-04-19 13:35:20Z

1

Inside your function change

$('.u_search').attr('id')

To

$(this).attr('id')

The quotes are important, but this is not inside quotes ;)

edited Apr 19, 2013 at 13:35

bipen

36.6k9 gold badges51 silver badges62 bronze badges

answered Apr 19, 2013 at 11:46

Amit Kriplani

6945 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MMM · Accepted Answer · 2013-04-19 11:33:17Z

0

When you do

$(".u_search").click(function() {...

your callback function has now an object called this. You can use it to get the actual object you've clicked. So in this case, if you want to get the ID of the clicked object, simply do this:

var the_id = $(this).attr("id");

answered Apr 19, 2013 at 11:33

MMM

7,3402 gold badges27 silver badges42 bronze badges

3 Comments

Oussama Jilal Over a year ago

seems that you have not read the question ... he is using var attr_u_search = $(this).attr('id');

MMM Over a year ago

You've edited your code. You've previously used the search() function!

MMM Over a year ago

You don't find it weird that three people answered the question as if he wasn't using this already? Also, if you make an edit quickly enough, the question won't indicate it.

Mysteryos · Accepted Answer · 2013-04-19 11:33:56Z

0

Inside a function, you can reference to the active jquery object by using $(this)

$(".u_search").click(function() {
 ...
 //get ID of button being clicked upon
//Jquery Solution
 $(this).attr('id');

//Or Javascript
  this.id;
 ...
}

answered Apr 19, 2013 at 11:33

Mysteryos

5,8013 gold badges35 silver badges54 bronze badges

1 Comment

MMM Over a year ago

The question has been edited, that's why a few people have provided this answer.

Fawad Ghafoor · Accepted Answer · 2013-04-19 11:35:55Z

0

  $("div").on("click",function(){
     var id = this.id; //returns id
   });

answered Apr 19, 2013 at 11:35

Fawad Ghafoor

6,2277 gold badges43 silver badges54 bronze badges

Comments

stlvc · Accepted Answer · 2013-04-19 11:36:13Z

0

var attr_u_search = $(this).attr('id');
var dataString = '&u_search=' + $(".u_search").attr('id');

You're selecting every u_search div again to build your datastring, instead of using the already fetched id:

var attr_u_search = $(this).attr('id');
var dataString = '&u_search=' + attr_u_search;

answered Apr 19, 2013 at 11:36

stlvc

8235 silver badges16 bronze badges

Comments

AFrenchDev · Accepted Answer · 2013-04-19 11:40:32Z

0

i think it's : $(this).attr('id') You need use $(this) to have the object that clicked..

var attr_u_search = $(this).attr('id');
var dataString = '&u_search=' + attr_u_search; // it's better !

edited Apr 19, 2013 at 11:40

answered Apr 19, 2013 at 11:33

AFrenchDev

1517 bronze badges

3 Comments

Oussama Jilal Over a year ago

the read the question carefully before answering ... he already used your answer

AFrenchDev Over a year ago

On beginning, he had $('u_search') ...And when he try to get the good id, he don't use $(this) !

AFrenchDev Over a year ago

in every .click(...) change $('u_search') by $(this).

Oussama Jilal · Accepted Answer · 2013-04-19 11:48:40Z

0

Try this :

$('body').on('click', '.u_search', function() {
  var attr_u_search = $(this).attr('id');
  var dataString = '&u_search=' + attr_u_search;
  alert(dataString);
  // REST OF CODE
});

(Tested and working, if it still does not work, the issue might be somewhere else)

edited Apr 19, 2013 at 11:48

answered Apr 19, 2013 at 11:41

Oussama Jilal

7,7592 gold badges33 silver badges54 bronze badges

1 Comment

Oussama Jilal Over a year ago

check that you include JQuery before the code and that the code comes after the html

Anjith K P · Accepted Answer · 2013-04-19 11:52:29Z

0

$('body').delegate('.u_search', 'click', function() {
    var attr_u_search = $(this).attr('id');
    var dataString = '&u_search=' + attr_u_search;
    alert(dataString);
});

answered Apr 19, 2013 at 11:52

Anjith K P

2,15827 silver badges35 bronze badges

2 Comments

Anjith K P Over a year ago

Try to alert value of attr_u_search

Surfine Over a year ago

the first codes dont work at all. the second one shows the id of the first div as alert...

Collectives™ on Stack Overflow

How to get id of clicked div jquery

8 Answers 8

Comments

3 Comments

1 Comment

Comments

Comments

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

3 Comments

1 Comment

Comments

Comments

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related