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

尝试以下代码

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 这是工作的jsfiddle：https://jsfiddle.net/cm4rLvq1/

Answer 4

在您的处理程序中调用$(this)正在按预期工作。因为您正在处理此事件$(document).keyup，所以您的处理程序在document元素上调用，而不是在元素本身上调用，因此this引用document。

但是当你将事件arg对象提供给你的处理函数时，你可以使用它的属性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" />

$（this）不处理动态创建的元素

4 个答案: