Question

我正在努力使用jquery来识别我点击的按钮。

我有一个动态生成的列表类别以及一个删除按钮，可以将其从数据库中删除。

我的输入是这样的：

<input id="deletesector" class="deletesector" type="submit" name="deletesector-4" value="Remove"></input>
<input id="deletesector" class="deletesector" type="submit" name="deletesector-5" value="Remove"></input>
<input id="deletesector" class="deletesector" type="submit" name="deletesector-6" value="Remove"></input>

我的脚本侦听.deletesector单击然后获取attr名称。但是，无论点击哪3个按钮，它都会返回deletesector-4的名称。

如何修复此问题，以便＆＃34; deletesector-5＆＃34;点击它就可以识别它。

  $(".deletesector").click(function() {  

    //store the id
    var name = $("input#deletesector").attr('name'); 

    //create the post variable string
    var dataString = 'serviceid='+ name;  
    alert (dataString);

Answer 1

在单击处理程序的匿名函数中使用this：

$(".deletesector").click(function(){  
    var name = this.name
});

您始终获得name deleteselector4的原因是因为这是id deleteselector id的第一个（但不是唯一）元素，{{1 HTML必须是唯一的才能有效。考虑到这一点id选择器只有在id搜索时才会查找一个元素，并在第一个元素处停止，假设它是只有那个id的元素（应该是这样）。

鉴于HTML中的id与class相同，请删除id，因为它没有任何用处，并且会主动损害HTML的有效性。

参考文献：

Element identifiers: the id and class attributes。

Answer 2

使用：

$(".deletesector").click(function(){  
    var name = $(this).attr('name');
    // your stuff here
});

jQuery事件中的

this指的是被点击的元素。

此外，您的重复id会混乱。

有关工作示例，请参阅此JSFiddle。

Answer 3

首先，您有一些重复的ID。这是固定代码：

<input id="deletesector-4" class="deletesector" type="submit" name="deletesector-4" value="Remove"></input>
<input id="deletesector-5" class="deletesector" type="submit" name="deletesector-5" value="Remove"></input>
<input id="deletesector-6" class="deletesector" type="submit" name="deletesector-6" value="Remove"></input>

然后你 jQuery 可能是这样的：

$(".deletesector").click(function(ev) {
  // CHECK THIS $(ev.target) element, very useful!
  elementClicked = $(ev.target);
  var name = elementClicked.attr('name'); 
  var dataString = 'serviceid='+ name;
  alert (dataString);
});

Here is a JSFiddle显示您的示例有效。

从列表JQUERY中获取单击输入的正确名称

3 个答案: