Jquery return undefined Datenattribut

Question

Wie kann ich den Wert von data-idTarif auf Alert id_tarif_groupe erhalten? Ich habe mit attr() und data() Methoden versucht, aber keiner von ihnen funktioniert.

$('.ddd').click(function(event) { 
 
    var ID = $(this).attr('id'); 
 
}).change(function() { 
 
    var ID = $(this).attr('id'); 
 
    var tarifHT = $('#id_saddle_model_' + ID).val(); 
 
    var id_tarif_groupe = $(this).data('idTarif'); 
 

 
    alert(id_tarif_groupe + ' ' + tarifHT + ' ' + ID); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr bgcolor=#e0e0e0 id="108" class="ddd"> 
 
    <td>ASG </td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_108" data-idTarif="1"></td> 
 
    <td><input type="text" value="3700.00" style="" id="id_saddle_model_108" data-idTarif="2"></td> 
 
    <td id="l_108"></td> 
 
    </tr> 
 
    <tr bgcolor=#ffffff id="99" class="ddd"> 
 
    <td>CEC </td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="1"></td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="2"></td> 
 
    <td id="l_99"></td> 
 
    </tr> 
 
</table>

Answer 1

Das ddd Element nicht über die data und es ist Ihr Fehler

$('.ddd input').change(function() { 
 
    var id_saddle_model_ = $(this); 
 
    var ID = id_saddle_model_.closest("tr").attr("id"); 
 
    var tarifHT = id_saddle_model_.val(); 
 
    var id_tarif_groupe = id_saddle_model_.attr('data-idTarif'); 
 
    alert(id_tarif_groupe + ' ' + tarifHT + ' ' + ID); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr bgcolor=#e0e0e0 id="108" class="ddd"> 
 
    <td>ASG </td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_108" data-idTarif="1"></td> 
 
    <td><input type="text" value="3700.00" style="" id="id_saddle_model_108" data-idTarif="2"></td> 
 
    <td id="l_108"></td> 
 
    </tr> 
 
    <tr bgcolor=#ffffff id="99" class="ddd"> 
 
    <td>CEC </td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="1"></td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="2"></td> 
 
    <td id="l_99"></td> 
 
    </tr> 
 
</table>

Answer 2

this bezieht sich auf das Element, das die Änderung ausgelöst hat. Wenn Sie dies in der Warnung ausgeben, sehen Sie dessen die Tabelle, die das Ereignis auslöst.

Um den Wert des Eingabefeldes zu erhalten, müssen Sie Ihre this zu input ändern.

Es muss auch Klein sein, wie in dem W3C-Standard beschrieben: https://www.w3.org/TR/html5/dom.html#dom-dataset

Für jeden Inhaltsattribut auf das Element, dessen erste fünf Zeichen die Zeichenfolge „Daten-“ sind und dessen verbleibende Zeichen (Wenn keine ASCII-Großbuchstaben enthalten, fügen Sie in der Reihenfolge, in der diese -Attribute in der Attributliste des Elements aufgeführt sind, ein Name-Wert-Paar zu Liste hinzu, dessen Name der Name des Attributs mit den ersten fünf entfernten Zeichen ist deren Wert ist das Attribut Wert.

$('.ddd').click(function(event) { 
 
    var ID = $(this).attr('id'); 
 
}).change(function() { 
 
    var ID = $(this).attr('id'); 
 
    var input = $('#id_saddle_model_' + ID); 
 
    var tarifHT = input.val(); 
 
    var id_tarif_groupe = input.data('idtarif'); 
 

 
    alert(this + ':' + input + ':' + id_tarif_groupe + ' ' + tarifHT + ' ' + ID); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr bgcolor=#e0e0e0 id="108" class="ddd"> 
 
    <td>ASG </td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_108" data-idTarif="1"></td> 
 
    <td><input type="text" value="3700.00" style="" id="id_saddle_model_108" data-idTarif="2"></td> 
 
    <td id="l_108"></td> 
 
    </tr> 
 
    <tr bgcolor=#ffffff id="99" class="ddd"> 
 
    <td>CEC </td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="1"></td> 
 
    <td><input type="text" value="" style="" id="id_saddle_model_99" data-idTarif="2"></td> 
 
    <td id="l_99"></td> 
 
    </tr> 
 
</table>