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

Posted 2023-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何为动态生成的<a>标签添加事件，只有点击时触发？相关的知识，希望对你有一定的参考价值。

已解决

插入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的标签进行事件的绑定！

这样就达到我的目的！参考技术A 生成标签<a>aa</a>时改成<a onclick="FunctionName();">aa</a>追问

你用什么方法生的标签啊

delegate委托事件（动态创建元素注册事件）

有这样一个小例子：

    <!--需求：给li里的a标签注册点击事件，并且点击“添加”按钮，新增li标签，新增的li里的a同样有注册事件-->
   <input type="button" id="btn" value="添加"/>
   <ul class="box">
       <li>
           <a href="javascript:void(0)">点击</a>
       </li>
       <li>
           <a href="javascript:void(0)">点击</a>
       </li>
       <li>
           <a href="javascript:void(0)">点击</a>
       </li>
       <li>
           <a href="javascript:void(0)">点击</a>
       </li>
   </ul>

正常注册点击事件给每个a的话，那么就满足不了最后一个“点击新的”，它就不会被注册事件，那么想要解决这个问题，就必须用到委托事件delegate，接下来说一下delegate事件的应用。

delegate方法常用的三个参数是：

selector：事件的最终执行元素

types：事件的类型

fn：所要执行的函数内容

那么就针对上面的案例写一下：点击每一个a，让其颜色变红，并且点击新增的a同样有这个效果

js如下：

<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        $("#btn").click(function(){
            $("<li><a href=\'javascript:void(0)\'>点击新的</a></li>").appendTo("ul")
        });
       
        /*$(".box li a").click(function(){
            $(this).css("color","red");给a直接注册点击事件是满足不了的
        });*/
        
        $(".box").delegate("a","click",function(){
            $(this).css("color","red");
        });
        //原理：是给box注册委托事件但是最终是有a来执行

    })
</script>