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

Question

我将输入字段附加到动作的div上。 当我尝试使用$(this).val()访问输入字段中的值时，我只是得到空值。

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

根据操作，可以在div上附加任意数量的输入字段。 我想获取在每个字段上输入的值。 当我尝试使用下面的这种方法来获取价值时，它没有奏效。 但是当我得到动态创建的id值并代替$(this)它起作用了

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

  })

但是这个有效

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

我的方法有什么问题吗？

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

你有尝试过吗？

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

Answer 3

试试下面的代码

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

这是工作中的jsfiddle： https ://jsfiddle.net/cm4rLvq1/

Answer 4

在处理程序中调用$(this)可以正常工作。 因为您正在处理类似$(document).keyup这样的事件， $(document).keyup您的处理程序是在document元素而不是元素本身上调用的，因此this是引用document 。

但是，当您向处理函数提供事件arg对象时，可以使用其属性target ，该target将引用触发事件的元素，如下所示：

 $(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" />