输入的jQuery Number字段不起作用

Question

这里有几个具有data属性的数字字段。我想在更改number字段值时获取data属性。但是它不能按预期工作。

下面是html代码

<tr>
    <td>
        <input data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>
<tr>
    <td>
        <input data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>

这是我的jquery代码

jQuery(document).ready(function() {
    'use strict';

    var se_ticket_amount = jQuery('.se-ticket-qty');

    se_ticket_amount.on('input', function(e){
        se_ticket_amount.each(function(index,elem){
            var unit_price = jQuery(this).data('unit-price');
            console.log(unit_price);
            console.log(index.val());
        });
    });
});

它不会在colsole上记录任何内容：/

Answer 1

我认为您不需要each()。请尝试以下方式：

jQuery(document).ready(function() {
  'use strict';

  var se_ticket_amount = jQuery('.se-ticket-qty');
  se_ticket_amount.on('input', function(e){
    var unit_price = jQuery(this).data('unit-price');
    var value = jQuery(this).val();
    console.log('Unit Price:',unit_price);
    console.log('Unit Value:',value);
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td>
        <input data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>
<tr>
    <td>
        <input data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>

Answer 2

您应该在input函数内部将each事件附加到元素。请参见下面的代码：

jQuery( '.se-ticket-qty' ).each( function() {
  jQuery( this ).on( 'input', function() {
    console.log( jQuery( this ).data( 'unit-price' ) );
    console.log( jQuery( this ).val() )
  } )
} )

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

<table>
  <tr>
    <td>
      <input data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
    </td>
  </tr>
  <tr>
    <td>
      <input data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
    </td>
  </tr>
</table>

Answer 3

您可以使用以下代码

$(document).ready(function(){
    
    var function_get_input = function(){
        var str = "";
        $("input.se-ticket-qty").each(function(value){
            str+="<span>Input:"+$(this).val()+"</span><br/>";
        });
        
        //show input
        $(".show-input").html(str);
    
    }
    
    //call function_get_input
    
    function_get_input();
    
    
    //event click
    
    $(".change-input").click(function(){
        function_get_input();
    });
    
    
    

});

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

<div class="show-input">

</div>
<br/>
<table border="1">
<tr>
    <td>
        <input data-unit-price="9.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>
<tr>
    <td>
        <input data-unit-price="19.99" class="se-ticket-qty" type="number" value="0" />
    </td>
</tr>

  <tr>
    <td><button class="change-input">Change Input</button>
  </tr>
</table>