Ermitteln der Eltern-ID für Kind klicken

Question

Ich versuche, Eltern-ID beim Klicken mit jquery zu erhalten.

Meine django Vorlage ist wie folgt:

<table id="archive-table" class="table table-hover table-vcenter"> 
    <thead> 
     <tr> 
      <th>Make and model</th> 
      <th>First registration</th> 
     </tr> 
    </thead> 
    <tbody> 
     {% for calculation in calculations %} 
      <tr data-archive-row class="archive-row" data-calculation-id={{ calculation.id }}> 
       <td>{{ calculation.first_registration }}</td> 
       <td>{{ calculation.body }}</td> 
      </tr> 
     {% endfor %} 
    </tbody> 
</table> 

Und mein js ist wie folgt:

<script> 
    $(document).ready(function() { 
     $('#archive-table').on('click', '[data-archive-row]', function (e) { 
      var calculation_id = e.target.dataset['calculationId']; 
      alert(calculation_id) 
     }) 
    }); 
</script> 

Wie kann ich die dataset['calculationId'] der Eltern erhalten unabhängig davon, ob ich auf Kind geklickt.

Mit meinem Code bekomme ich undefined in Alarm. Aber wenn ich zum Beispiel data-calculation-id={{ calculation.id }} zu einem td hinzufügen und wenn ich dann darauf klicke, dann bekomme ich die richtige ID.

Gibt es eine Möglichkeit, die ID von Parent zu erhalten, egal, ob auf Child oder auf Eltern geklickt wird?

Answer 1

Verwenden e.currentTarget, nicht target:

$(document).ready(function() { 
    $('#archive-table').on('click', '[data-archive-row]', function(e) { 
    var calculation_id = e.currentTarget.dataset.calculationId; 
    alert(calculation_id) 
    }) 
}); 

Da Sie Ereignis delegieren, wird e.currentTarget TR-Element sein, und Ziel wird sein, was Sie in dieser TR geklickt haben, vielleicht TD oder etwas in ihm.

Eine weitere einfache Lösung ist einfach this zu verwenden, wie es immer in Ereignishandler TR Punkt:

var calculation_id = this.dataset.calculationId; 

Answer 2

Da Sie jQuery verwenden Sie die jQuery-Methode .data() stattdessen verwenden könnte:

$('#archive-table').on('click', '[data-archive-row]', function (e) { 
    var calculation_id = $(this).data('calculation-id'); 
    alert(calculation_id) 
}) 

Hoffe das hilft.

$(document).ready(function() { 
 
    $('#archive-table').on('click', '[data-archive-row]', function (e) { 
 
    var calculation_id = $(this).data('calculation-id'); 
 

 
    console.log(calculation_id); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="archive-table" class="table table-hover table-vcenter"> 
 
    <thead> 
 
    <tr> 
 
     <th>Make and model</th> 
 
     <th>First registration</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr data-archive-row class="archive-row" data-calculation-id='calculation.id'> 
 
     <td>calculation.first_registration</td> 
 
     <td>calculation.body</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

prüft für Daten-Berechnung-ID auf aktuelles Ziel und wenn es nicht definiert ist seine Mutter überprüfen.

<script> 
    $(document).ready(function() { 
     $('#archive-table').on('click', '[data-archive-row]', function (e) { 
      var calculation_id = e.currentTarget.dataset['calculationId'] 
           || e.currentTarget.parentElement.dataset['calculationId']; 
      alert(calculation_id) 
     }) 
    }); 
</script>