$（this）在动态创建的元素上不起作用

Question

I am appending input fields to a div on a action. When i try to access the value inside the input field using $(this).val() i am just getting empty values.

$('#div').append('<td class = "fund-amount"><input type="number" class="custom-amount" id='+value.response_code+' placeholder="Rs."></td>');

Depending upon the action there can be any number of input field appended to the div. I want to get the values entered on each field. when i tried to to get the value using this approach below, it didn't work out. But when i got the dynamically created id value and used in the place of $(this) it worked

 $(document).keyup('.custom-amount',function(){
     console.log($(this).val()); //just logging empty
     console.log($(this).attr('id')); //Logged undefined

  })

but this one works

 $(document).keyup('#100520',function(){
     console.log($('#100520').val());//works
     console.log($('#100520').val());//works
 });

Is there anything wrong with my approach ?

Answer 1

$(document).on('key-up','.custom-amount',function(){
     console.log($(this).val()); //just logging empty
     console.log($(this).attr('id')); //Logged undefined

  })

Answer 2

Have you tried this?

$(document).on('keyup', '.custom-amount', function(){
   console.log($(this).val()); 
   console.log($(this).attr('id'))
});

Answer 3

Try the following code

 $('#div').append('<td class = "fund-amount"><input type="number" class="custom-amount" id='+100520+' placeholder="Rs."></td>'); $('.custom-amount').keyup(function() { console.log($(this).val()); // value console.log($(this).attr('id')); // id }) 

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

Here is the working jsfiddle: https://jsfiddle.net/cm4rLvq1/

Answer 4

Calling $(this) in your handler is working as expected. Because you are handling events like this $(document).keyup your handler is invoked on the document element and not on the element itself, and therefor this refers to the document .

But when you supply event arg object to your handler function, you can use its property target which will refer to the element which triggered the event, like this:

 $(function() { $(document).on("keyup", ".custom-amount",function(e){ console.log($(e.target).val()); console.log($(e.target).attr('id')); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="custom-amount" id="some-id" />