Question

我有一个div块，我试图找到被点击的输入元素的名称，然后使用jQuery更新值：

$(document).ready(function(){
  $(this).click(function(){
    console.log($(this).attr('name'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="text" name="name1" id="id1">TestData1</input>
<input type="text" name="name2" id="id2">TestData2</input>
</div>

当我尝试找到被点击的输入元素时，我得到undefined。

我假设它可能是因为我正在检查点击事件然后再次尝试获取它的attr名称，但因为它可以增加到至少5个输入元素并且这些是动态获取的，我无法使用click事件绑定id / class。

Answer 1

this在就绪函数中没有上下文：

$(this).click(function(){
_^^^^^___________________
   console.log($(this).attr('name'));
});

您应该使用input：

$('input').click(function(){
   console.log($(this).attr('name'));
});

注意：输入标记是自闭的：

<input type="text" name="name1" id="id1" value='TestData1'/>
<input type="text" name="name2" id="id2" value='TestData2'/>

我希望这会有所帮助。

$(document).ready(function(){
  $('input').click(function(){
    console.log($(this).attr('name'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="text" name="name1" id="id1" value='TestData1'/>
<input type="text" name="name2" id="id2" value='TestData2'/>
</div>

Answer 2

为什么不用元素绑定呢？

$("input").click(function(){
   console.log($(this).attr('name'));
});

Answer 3

您将点击绑定到document（简称整个网页），文档没有名为name的属性。它将在控制台上返回undefined。

正如其他答案所示，我还建议将点击事件绑定到input而不是document。

如果您想使用document绑定点击并使用event找到目标点击元素，它将自动作为点击处理程序的参数提供。尝试使用以下代码段

＆＃13;

$(document).ready(function(){
  $(this).click(function(event){
    console.log($(event.target).attr('name'));
  });
});

＆＃13;

<div>
  <input type="text" name="name1" id="id1">TestData1</input>
  <input type="text" name="name2" id="id2">TestData2</input>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

在此处访问您单击的事件目标元素，并使用它来获取name属性值。如果您的目标元素具有name属性，则返回name属性值，否则将返回undefined。

使用jquery动态获取name属性

3 个答案: