Question

我动态创建一堆标签，将它们附加到然后我添加了一个点击处理程序......

$(document).ready(function(){
    // ... code to append <a> tags to nav div        
    $("#nav a").click(function(event){ 
       alert('Clicked '+event.target.id);
       return false;
    });
});

如果我有10个标签，并点击第一个，我会得到10个（TEN！）警报 - 但它们都会显示我实际点击的标签的ID。

（如果我点击第5个标签，是的，我收到5个警报 - 所有第5个标签的ID ...）

这里发生了什么？是因为我动态创建了标签吗？有没有办法避免它？

由于

Answer 1

嗯...我认为您应该检查您的标签是否正确关闭。使用firebug检查生成的HTML。如果你的html看起来像

，你可能会得到这个

<a>one<a>two<a>three</a></a></a>

Answer 2

你可以试试这个：

$(document).ready(function() {
    /* ... code to append <a> tags to nav div.  */      

    $("#nav a").each(function() {
        $(this).click(function(e) {
            console.log('Clicked ' + e.target.id);
            return false;   
        });
    });
});

然而，这两者都是一样的！您的代码没有问题。检查标记生成代码是否存在错误。

Answer 3

尝试：

$(document).ready(function(){
    // ... code to append <a> tags to nav div        
    $("#nav a").click(function(event){ 
       alert('Clicked '+ this.id); // replaced with "this"
       return false;
    });
});

确保您的代码有效，例如：

<nav id="nav">
<a id="1" href="#"></a>
<a id="2" href="#"></a>
// ...
</nav>

Answer 4

首先使用firebug查看id是否实际正确放置然后我将更改您的代码并查看它是否有效。

$(document).ready(function(){
    // ... code to append <a> tags to nav div        
    $("#nav a").click(function(event){ 
       alert('Clicked '+ $(this).attr('id'));
       return false;
    });
});

Answer 5

你的代码是正确的，至少在我的测试中它对我有用。

问题可能是IE6的怪异或只是一个位置的CSS问题：绝对;显示：块;

在我看来，这不是一个JavaScript问题。

Answer 6

正如其他人注意到的那样，我认为你用来动态生成锚点的代码有问题。

尽管如此，这是一个应该实现您的目标的例子：

$(document).ready(function(){

  var eNav = document.getElementById('nav');

  var aLink = null;
  for(var i = 0; i < 5; i++) {
    aLink = document.createElement('a');
    aLink.href = 'javascript:;';
    aLink.id = i;
    aLink.appendChild(document.createTextNode('Link'));
    eNav.appendChild(aLink);
  }

  $("#nav a").click(function(event){ 
    alert('Clicked '+ event.target.id);
    return false;
  });

});

Answer 7

听起来像你将事件处理函数x绑定到每个元素的次数，其中x是数组/对象属性中的元素索引（+ 1） '重复进行绑定。

如何将<a>元素附加到DOM？你能展示完整的相关代码吗？

jquery单击处理程序

7 个答案: