jquery 点击处理程序

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 个（十个！）警报 - 但它们都显示我实际单击的标签的 ID。

（如果我单击第 5 个标签，是的，我会收到 5 个警报 - 都带有第 5 个标签的 id...）

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

谢谢

Answer 1

你可以试试这个：

$(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 2

在我看来，您将事件处理函数 x 绑定到每个元素的次数，其中 x 是您要迭代的数组/对象属性中该元素的索引 (+ 1)进行绑定。

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

Answer 3

正如其他人所注意到的，我认为您用于动态生成锚点的代码有问题。

不过，这里有一个示例，应该实现您的目标：

$(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 4

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

问题可能是 IE6 的怪异，也可能只是 CSS 的 position:absolute; 问题。显示：块；

在我看来不是 javascript 问题。

Answer 5

首先使用 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 6

试试：

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

嗯...我认为您应该检查您的标签是否正确关闭。使用 firebug 检查生成的 HTML。如果你的 html 看起来像这样，你可能会得到这个

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