jQuery返回未定义的数据属性

Question

How can I get the value from data-idTarif on alert id_tarif_groupe? I've tried with attr() and data() methods but none of them are working.

 $('.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

The ddd element does not have the data and there is your error

 $('.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 refers to the element who fired the change.. if you print this in the alert, you see its the tablerow that is firing the event.

To get the value of the input field, you need to change your this to input .

It also needs to be lowercase, as described in the w3c standard: https://www.w3.org/TR/html5/dom.html#dom-dataset

For each content attribute on the element whose first five characters are the string "data-" and whose remaining characters (if any) do not include any uppercase ASCII letters, in the order that those attributes are listed in the element's attribute list, add a name-value pair to list whose name is the attribute's name with the first five characters removed and whose value is the attribute's value.

 $('.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>