Question

如何为动态生成的<a>标签添加事件 ，只有点击时触发？

已解决

Answer 1

插入html代码后要重新绑定事件

近日工作当中，需要对由jquery动态生成的标签添加一些事件效果。

最初的做法是在页面载入时调用事件监听如下：

Js代码
1.$(document).ready(function(){
2. $("a.keyWord1").hover( 3. function(){ 4. $(this).css("text-decoration","underline"); 5. $(this).css("color","#fc9b3f"); 6. },
7. function(){ 8. $(this).css("text-decoration","none"); 9. $(this).css("color",""); 10. }
11. );
12. });
$(document).ready(function(){
$("a.keyWord1").hover(
function(){
$(this).css("text-decoration","underline");
$(this).css("color","#fc9b3f");
},
function(){
$(this).css("text-decoration","none");
$(this).css("color","");
}
);
}); 本意是，当鼠标移动到a标签时触发hover效果。但是最终一点发应也没有，当然以上的代码没有问题，我在其它地方是可以使用的。

后来对比了其它地方用到这段代码的标签，发现我当前的a标签是通过jquery动态生成的，而不是后台生成的，所以思考可能是由于jquery在页面加载绑定事件时，由于我的后来动态生成的a标签还不存在，所以事件绑定自然就不成立！当然一点反应也没有！

找到问题，就开始找解决方案：

方案如下（不是很完美）

在动态生成标签后，添加如下代码：

Js代码
1.$("a.keyWord1").bind("mouseover",function(){
2. $(this).css("text-decoration","underline"); 3. $(this).css("color","#fc9b3f"); 4.
5. });
6. $("a.keyWord1").bind("mouseout",function(event){ 7. //阻止事件冒泡 8. event.stopPropagation();
9. $(this).css("text-decoration","none"); 10. $(this).css("color","#06F"); 11. $(this).unbind(); 12. });
$("a.keyWord1").bind("mouseover",function(){
$(this).css("text-decoration","underline");
$(this).css("color","#fc9b3f");

});
$("a.keyWord1").bind("mouseout",function(event){
//阻止事件冒泡
event.stopPropagation();
$(this).css("text-decoration","none");
$(this).css("color","#06F");
$(this).unbind();
});

上面的代码意思是，对a标签，且class=keyWord1的标签进行事件的绑定！

这样就达到我的目的！

Answer 2

生成标签<a>aa</a>时改成<a onclick="FunctionName();">aa</a>

追问

你用什么方法生的标签啊