jQuery的点击处理

我创建了一堆的标签动态，追加到一个我再添加一个单击处理...jQuery的点击处理

$(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个警报 - 所有与第五标签的ID ...）

这是怎么回事吗？是因为我动态创建了标签吗？有没有办法避免它？

感谢

来源

2009-10-20 blogofsongs

你可以发布用于动态生成锚的代码吗？ – Tom 2009-10-20 12:15:04

试试这个：

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

无论如何，这些都是一样的！你的代码没有问题。检查标记生成代码的错误。

来源

2009-10-20 12:10:16 sepehr

尝试：

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

来源

2009-10-20 12:01:00

嗯......我想你应该检查你的代码正在正确关闭。使用萤火虫检查生成的HTML。你可能会得到这个，如果你的HTML看起来像

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

来源

2009-10-20 12:04:59

这里好点！ – sepehr 2009-10-20 12:20:50

这是一个好主意！ - 但这引发了另一个问题......我的代码在IE和Chrome中运行良好，但在FF中没有产生任何错误 - 没有任何错误。不过，让我看看Firebug展示的是什么。 – blogofsongs 2009-10-20 12:52:58

那么，你可能会粉笔，直到浏览器的差异......如果你的HTML是完全正确的，在这里再次发布...... – 2009-10-20 20:06:07

首先使用萤火虫，看看id是否实际放置正确，那么我会改变你的代码thos这看它是否工作。

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

来源

2009-10-20 12:10:22 Dan

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

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

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

来源

2009-10-20 12:19:30 Ismael

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

尽管如此，这里有一个例子应该实现你的目标的结果：

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

});

来源

2009-10-20 12:20:13 Tom

这听起来好像你的事件处理函数x多次绑定到每个元素那里x是该元素的索引（+ 1）在您要迭代进行绑定的数组/对象属性中。

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

来源

2009-10-20 12:23:34

jQuery的点击处理

回答

相关问题