How to get id of dynamic looped element for record clicked

Question

I have records that are being looped through and sent to the html file via json_encode. For each record, I have a data-attribute that I am storing the record id. What I am trying to accomplish is when the user clicks "Edit" (.recEdit) then I can obtain the id (data-recId). I am trying to do this with a click function, utilizing the $(this) and parent() functions.

What am I doing wrong?

Here is the looped code from the php file:

$html .= '<div class="recentProjectCont" data-recId="'.$recProjId.'">';
$html .= '<div class="recProjInfoCont">';
$html .= '<div class="recInfoCont1">';
$html .= '<span class="recProjName recBaseFormat">'.$recProjName.'</span>';
$html .= '</div>';
$html .= '<div class="recInfoCont2">';
$html .= '<span class="recInfoStat recBaseFormat">'.$recProjStat.'</span>';
$html .= '</div>';
$html .= '</div>';
$html .= '<div class="recEdit">Edit</div>';
$html .= '</div>';

Then the click function where I am attempting to obtain the id.

$(document.body).on('click', '.recEdit' ,function() {
    var projID = $(this).parent().data('recId');
    console.log('Project ID is..... ' + projID);
});

score 1 · Accepted Answer · answered Aug 28 '19 at 19:41

1

The names of data attributes get normalised to lowercase in jQuery's internal cache, so you need to use data('recid') instead of data('recId')

$(document.body).on('click', '.recEdit', function() {
  var projID = $(this).parent().data('recid');
  console.log('Project ID is..... ' + projID);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="recentProjectCont" data-recId="$recProjId">
  <div class="recProjInfoCont">
    <div class="recInfoCont1">
      <span class="recProjName recBaseFormat">$recProjName</span>
    </div>
    <div class="recInfoCont2">
      $html
      <span class="recInfoStat recBaseFormat">$recProjStat</span>
    </div>
  </div>
  <div class="recEdit">Edit</div>
  $html
</div>

answered Aug 28 '19 at 19:41

Rory McCrossan

331,213
40
305
339

Thanks - this did the trick! – Paul Aug 28 '19 at 19:50
Certainly the case normalization has been noticed previously...? – Heretic Monkey Aug 28 '19 at 19:51
@HereticMonkey No, it hasn't given me any issues with anything I have done thus far. – Paul Aug 28 '19 at 19:52
Didn't realise I had a reputation :) You're right, this should have been closed a dupe. – Rory McCrossan Aug 28 '19 at 19:59

score 0 · Answer 2 · answered Aug 28 '19 at 19:48

0

If you don't stick to using $(this), you can try to provide onClick handler function like this:

function(event) {
  var projID = $(event.target).parent().data('recId');
  console.log('Project ID is..... ' + projID);
}

answered Aug 28 '19 at 19:48

Ogochi

320
3
12

Not sure why this was upvoted considering it's syntactically broken, and a big step backwards in terms of best practice. – Rory McCrossan Aug 28 '19 at 20:00
@RoryMcCrossan using jquery is a big step backwards in terms of best practice – Kamil Kiełczewski Aug 28 '19 at 20:09
That's arguable. However using inline `onclick` attributes is not what anyone should be doing. – Rory McCrossan Aug 28 '19 at 20:10
That's arguable - modern framewroks like angular bind handlers in html templates. In pure js, especially for small pages this is acceptable. For big pages, people use frameworks... – Kamil Kiełczewski Aug 28 '19 at 20:12

Kamil Kiełczewski · Answer 3 · 2019-08-28T20:06:40.933

You can change a little your approach in this way - change before last php line to

$html .= '<div class="recEdit" onclick="clicked('.$recProjId.')">Edit</div>';

Then remove jquery handler and add simple

function clicked(projID) { 
    console.log('Project ID is..... ' + projID);
}

function clicked(projID) {
  console.log('Project ID is..... ' + projID);
}

.recEdit{ padding: 10px; background: #fdf; width: 30px; cursor:pointer }

<div class="recentProjectCont" data-recId="666">
  <div class="recProjInfoCont">
    <div class="recInfoCont1">
      <span class="recProjName recBaseFormat">My-project</span>
    </div>
    <div class="recInfoCont2">
      <span class="recInfoStat recBaseFormat">stat_123</span>
    </div>
  </div>
  <div class="recEdit" onclick="clicked(666)">Edit</div>
</div>

How to get id of dynamic looped element for record clicked

3 Answers3