keyup events using class instead of id

Question

If I have 2 textboxes, without using id's, how do I determine which textbox is firing off "keyup" events?

For various reasons I need to use classes instead of id's, where the class name is the same for both textboxes.

Infact, I could have the same textbox on the screen many times with the same class name.

The HTML looks something like this

<div class="outer_div">
   <input type="text" class="mytextbox" />
   <div class="inner_div"></div>
</div>

<div class="outer_div">
   <input type="text" class="mytextbox" />
   <div class="inner_div"></div>
</div>

<div class="outer_div">
   <input type="text" class="mytextbox" />
   <div class="inner_div"></div>
</div>

Answer 1

use $(".<classname>").keyUp(function (){ $(this).<whatever u do here> });

Answer 2

$('.mytextbox').keyup(function(event){
 // play with event
 // use $(this) to determine which element triggers this event
});

Answer 3

You can use the data- attribute to assign an id eg..

<input data-id="x" />

Then do something like.

console.log($(this).data('id'));

Answer 4

Since you don't have any id then you can use this keyword in the keyup function

$('.txtboxClass').keyup(function(event) {
   $(this) <== "This is the current textfield"
})

Answer 5

You could attach pretend IDs onto the elements using data()

$('.foo').each(function(i,e) {
    $(e).data('fakeid', 'fakeid'+i);
});

Then read it back in the keyup event

$('.foo').keyup(function(){
    var fakeid = $(this).data('fakeid');
});

Answer 6

you may try this...:)

<table class="table_border">
    <tbody class="container-items_items">
        <tr>
        <th width="10%" class="text-right">Cost</th>
        <th width="5%" class="text-right">Quantity</th>
        <th width="10%" class="text-right">Total</th>
        </tr> 
     <tr class="item_items">
      <td class="text-right">
        <input type="text" name="qty" class="cost_text">
      </td>
        <td class="text-right">
          <input type="text" name="qty" class="qty_text">
      </td> 
     <td class="total_cost"></td>
    </tr>          
    </tbody>
</table>



<script type="text/javascript">
    $(document).ready(function()
         {
           $('.cost_text').on('keyup',function(e)
            {
                var cost_value = $(this).val();
                var qty_value = $(this).parents('.item_items').find('.qty_text').val();
                $(this).parents('.item_items').find('.total_cost').html(cost_value*qty_value).prepend('$');
            });

            $('.qty_text').on('keyup',function(e)
            {
                var qty_value = $(this).val();
                var cost_value = $(this).parents('.item_items').find('.cost_text').val();
                $(this).parents('.item_items').find('.total_cost').html(cost_value*qty_value).prepend('$');
            });
        })
</script>